原生微信小程序使用Redux状态管理

在小程序中使用状态管理的类库有很多，个人使用的Redux，在此记录一下。
一. 相关地址：
官网：https://www.redux.org.cn/
github：https://github.com/reduxjs/redux

二. 新建如图目录结构

image.png

三. 编写如下代码

//actions/app.js
/**
 * @description 修改用户信息
 */
export const actionUserInfo = userInfo => {
  console.log(userInfo);
  
  return {
    type: 'action-userInfo',
    userInfo
  }
}

//actions/index.js
export * from './app'

//reducers/app.js
const defaultState = {
  userInfo: {}
}

const app = (state = defaultState, action) => {
  switch (action.type) {
    case "action-userInfo":
      var newState = Object.assign({}, state, {
        userInfo: action.userInfo
      })
      return newState;
    default:
      return state;
  }
}

export default app;

//reducers/index.js
import app from './app'

export default {
  app
}

//store/index.js
import {
  createStore,
  combineReducers
} from '../libs/redux/redux.min'
import rootReducer from './reducers/index';

class Store {
  constructor() {
    return createStore(combineReducers(rootReducer))
  }
}

export default Store;

//app.js
import Store from "./store/index";
import * as actions  from "./store/actions/index";

App({
  onLaunch: function () {
    wx.__actions = actions;
    wx.__store = new Store();
  }
})

//使用的时候 例如：
//pages/index/index
  getUserInfo: function (e) {
    let userInfo = e.detail.userInfo;
    let actionUserInfo = wx.__actions.actionUserInfo
    wx.__store.dispatch(wx.__actions.actionUserInfo(userInfo));
  }

我在app.js中将store和actions直接挂在wx对象下面，这样可以在使用的时候直接在wx对象下面寻找store实例并dispatch actions，不用每次都先按目录路径引入相关对象。

查看状态中的数据时可以使用

wx.__store.getState();

监听数据变化使用subscribe函数，处理并更新UI

wx.__store.subscribe(handleChange);

当然使用的方法不止上述配置，你也可以自行创建。

Redux 弊端在于，在设置subscribe监听后，并不能让其只在关注的数据变化时去执行回调函数，例如我可能只想在监听到userInfo数据变化时触发回调，而其他数据变化不进行任何动作。

个人总结，如有错误，敬请指出。