【微信小程序】---- weapp-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

10. 下载

weapp-redux