用rxjs實現小程序狀態管理

前言

用vue和react作開發，咱們常常選擇vuex，redux一類的狀態管理工具來輔助管理狀態，狀態邏輯複雜的微信小程序，若是有狀態管理工具的話，能夠極大地提升開發效率和可維護性。

想象這樣一個場景，一個用戶修改了用戶名，小程序中有十多個組件都用到了這個「用戶名」這個狀態，若是須要把這些顯示都更新，用原生的方式來實現是很麻煩的，本文介紹一種方法，基於rxjs來管理小程序中的各類狀態。

rxjs學習資料：

• 官網文檔https://rxjs.dev/
• 學習rxjs操做符 這篇文章介紹了低版本rxjs的操做符，很實用

引入rxjs

咱們儘可能避免多餘的構建工具，直接使用umd版本的rxjs，下載地址：https://unpkg.com/rxjs/bundles/rxjs.umd.min.js，下載好後，把它放在lib目錄中。

實現思路

新建一個stores目錄，把狀態相關的文件都放在裏面，在stores下新建一個user.js，用來管理用戶的狀態。

新建services目錄，存放api相關的服務，在services中新建user.js，用來存放請求用戶數據的函數。

demo：

// services/user.js
export const userSvc = {
  getUserInfo: () => {
    console.log('執行獲取用戶信息');
    return 'xiaoming'; // 第一次請求返回的值
  }
};

// stores/user.js
import * as Rx from '../lib/rxjs.umd.min';
import { userSvc } from '../services/user';

const types = {
  UPDATE_USER_INFO: 'UPDATE_USER_INFO'
};

const states = {
  // BehaviorSubject把數據流中的最新值推送給訂閱者
  user$$: new Rx.BehaviorSubject(userSvc.getUserInfo())
};

const actions = {
  [types.UPDATE_USER_INFO] () {
    return 'laoming';
  }
};

function dispatch(action, args) {
  switch (action) {
    case types.UPDATE_USER_INFO:
      var newStates = actions[types.UPDATE_USER_INFO]();
      states.user$$.next(newStates);
      break;
  }
}

export { types, states, actions, dispatch };

實現的思路是這樣的：

首先建立一個status，用來保存用戶的狀態，用戶狀態是一個subject，這樣就能夠向各個組件中的訂閱發送組播。

而後寫一系列的action，action的名稱表示要執行的動做，在action函數中完成一些異步操做，好比從新獲取用戶信息，咱們以後會把它的返回值廣播給全部的訂閱。

最後是dispatch函數，它描述瞭如何修改狀態值，dispatch根據傳入的action名稱，執行不一樣的action和邏輯，最終用subject.next()方法把數據廣播給每一個訂閱。

有了這組代碼，咱們只須要在使用數據的地方訂閱就能夠了：

// 在某個page中
import { states as userStates } from '../../stores/user';
Page({
  data: {
    name: '',
  },
  onLoad: function () {
    // 訂閱測試，此時，name的值應該爲'xiaoming'
    userStates.user$$.subscribe(data => {
      console.log(data);
      this.setData({
        name: data
      });
    });
  }
});

// 在page的某個組件中
import { states as userStates, types as userTypes, dispatch as userDispatch } from '../../stores/user';
Component({
  data: {
    name: ''
  },

  attached() {
    userStates.user$$.subscribe(data => {
      console.log(data);
      this.setData({
        name: data
      });
    });
    setTimeout(() => {
      userDispatch(userTypes.UPDATE_USER_INFO);
    }, 3000);
  }
});

3秒後，將會看到page和component中的name都變成了'laoming'，這樣就實現了簡單的狀態管理。