0.0.2 • Published 2 years ago
wx-miniprogram-redux v0.0.2
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 最后一个函数取得的数据;