wx-redux

介绍

可以在微信小程序中使用 redux + redux-saga + redux-logger 的工具库，并实现了类似 reselect 处理 redux 数据变动的功能，可以减少与该页面无关的 redux 数据变动带来 setData 的性能消耗

安装教程

npm install wx-miniprogram-redux

或者：

yarn add wx-miniprogram-redux

使用说明

该程序暴露了 configureStore, dispatch, getState, connect, stateSelector, createSelector 共五个 api

configureStore：初始化 redux

dispatch： 提交 action

getState：获取 reducer 数据实例

connect：Behavior，连接微信小程序 Component 页面或组件和 redux（所以 page 页面无效，Component 非常强大，足以取代 page）

stateSelector：处理 Component 页面或组件和 redux 的中间函数

createSelector：实现类似 reselect 处理 redux 的功能函数

import { configureStore } from "wx-miniprogram-redux";

App({
  onLaunch: function () {
    // 第三个参数为 true or false，true 即开启 redux-logger，false 即不开启（建议开发时开启，生产不开启）
    configureStore(rootReducer, rootSaga, true);
  },
});

const { connect, stateSelector, createSelector, dispatch } = require("wx-miniprogram-redux");
const { aysncTest } = "../../actions";

const number = 2;

// 类 reselect，前面函数为依赖，最后一个函数为最后取的数据，最后会 setData 进 data 中；
const selector = createSelector(
  (state) => state.account.own,
  (state) => state.tt.test,
  (_, data) => data.number,
  (_, data) => data.addNum,
  (own, test, number, addNum) => {
    const numberAccount = number + addNum;

    return {
      ...own,
      ...test,
      numberAccount,
    };
  }
);

Component({
  behaviors: [connect],
  selector: (data) => stateSelector(selector, { ...data, number }),

  data: {
    addNum: 2,
  },

  stateUpdated(preState) {
    console.log('preState', preState);
    console.log('this.data', this.data);
  },

  methods: {
    handleDispatch() {
      // 提交 action
      dispatch(aysncTest({ name: "test-change" }));
    },
  }
})

stateUpdated

使用了 connect 这种方式处理 redux 的页面组件，本页面组件的依赖发生变化后，stateUpdate 函数便会执行，参数为变化前的 createSelector 最后一个函数取得的数据；