微信小程序 redux 应用实例

## weapp-redux 使用 ### 1. 引入 weapp-redux 插件 1. 克隆 weapp-redux-demo 代码库 ``` git clone https://gitee.com/Rattenking/weapp-redux-demo.git ``` 2. 将项目文件夹下的 weapp-redux 拷贝到自己项目 ### 2. 创建全局的 store 1. 在 weapp-redux 同级创建 store 文件夹 2. 在 store 文件夹下分别创建 actions, constants, reducers 文件夹 > constants 目录，用来放置所有的 action type 常量 > actions 目录，用来放置所有的 actions > reducers 目录，用来放置所有的 reducers 3. 同时创建 index.js 文件为 store 的入口文件 4. 分别在 actions, constants, reducers 文件夹下创建 index.js 文件，作为操作的入口文件 ### 3. 创建 store 入口 ``` store/index.js --- import { createStore, applyMiddleware } from '../weapp-redux/index' import reducer from './reducers/index'; const store = createStore(reducer) export default store; ``` ### 4. 在项目入口文件 app.js 中使用 weapp-redux 中提供的 Provider 组件将创建好的 store 接入应用中 ``` app.js --- import store from './store/index' import action from './store/actions/index' import Provider from './weapp-redux/provider/index' let { Page, Component } = Provider(store, action) ``` ### 5. 开发一个简单的加、减计数器功能 1. 新增 action type ``` constants/actionTypes.js --- // 数字操作命令 // 加 export const ADD = 'ADD'; // 减 export const MINUS = 'MINUS'; ``` 2. 新增 reducer 处理 ``` reducers/numHandle.js --- import { ADD, MINUS } from '../constants/actionTypes' const defaultState = { count: 0 } export const numHandle = (state = defaultState, action) => { switch (action.type) { case ADD: return { ...state, count: state.count + 1 }; case MINUS: return { ...state, count: state.count - 1 }; default: return state; } } ``` ``` reducers/index.js --- import { combineReducers } from '../../weapp-redux/index'; import { numHandle } from './numHandle'; export default combineReducers({ numHandle }) ``` 3. 新增 action 处理 ``` actions/numHandle.js --- import store from '../index' import { ADD, MINUS } from '../constants/actionTypes'; export function add(){ store.dispatch({ type: ADD }) } export function minus(){ store.dispatch({ type: MINUS }) } export function asyncAdd(){ setTimeout(() => { add() }, 2000) } ``` ``` actions/index.js --- import * as numHandle from './numHandle'; export default { numHandle } ``` ### 6. 计数器页面应用 1. 直接访问 this.$action 操作 count ``` pages/index/index.js --- Page({ storeTypes: ['numHandle'], data: {}, add(){ this.$action.numHandle.add(); }, minus(){ this.$action.numHandle.minus(); }, asyncAdd(){ this.$action.numHandle.asyncAdd(); } }) ``` ``` pages/index/index.wxml --- <view class="container"> <view>Hello, World!</view> <view>{{numHandle.count}}</view> <button catchtap="add">+</button> <button catchtap="minus">-</button> <button catchtap="asyncAdd">asyncAdd</button> <navigator url="../logs/logs">import 引入操作页</navigator> <navigator url="../actionType/index">actionTypes 引入操作页</navigator> </view> ``` 2. import 引入计数器操作方法 ``` pages/logs/logs.js --- import { add, minus, asyncAdd } from '../../store/actions/numHandle'; Page({ storeTypes: ['numHandle'], add, minus, asyncAdd }) ``` 3. actionTypes 引入计数器操作方法 ``` pages/actionType/index.js --- Page({ storeTypes: ['numHandle'], actionTypes: ['numHandle'] }) ``` ### 7. 总结 1. 第一种方法需要重新在对应页面创建对应的操作方法； 2. 第二种需要import引入对应的方法； 3. 第三种是将actions对应暴露的方法全部导入； 4. 请按照实际情况使用 ### 8. 目前消耗性能需要优化 1. dispatch 的时候会将所有的订阅都执行一次，期望仅执行和更新相关的订阅； 2. 订阅的时候是将需要的全局状态一起 setData，期望仅更新发生变化的部分进行更新！ ### 9. 如果有什么优化建议，请反馈！反馈QQ群：264303060