wepy之redux状态管理

按照官方生成的wepy默认目录是这样的，如果不懂得如何生成wepy默认项目，请看这里

image.png

介绍redux涉及到的几个目录

//types/counter.js 定义方法的名字

export const INCREMENT = 'INCREMENT'

export const DECREMENT = 'DECREMENT'

export const ASYNC_INCREMENT = 'ASYNC_INCREMENT'

//types/index.js 暴露counter.js里面定义的方法名字

export * from './counter'

//reducers/counter.js 定义方法的名字

//通过handleActions函数导出
import { handleActions } from 'redux-actions'
//这里把types里的函数名引入 注意相对路径
import { INCREMENT, DECREMENT, ASYNC_INCREMENT } from '../types/counter'

export default handleActions({
  [INCREMENT] (state) {
    //也可以在这个位置进行逻辑的处理之后再return处理之后的值，当然简单的处理直接放return里面处理也是可以的
    return {
      ...state,
      num: state.num + 1
    }
  },
  [DECREMENT] (state) {
    return {
      ...state,
      num: state.num - 1
    }
  },
  [ASYNC_INCREMENT] (state, action) {
    return {
      ...state,
      asyncNum: state.asyncNum + action.payload
    }
  }
}, {
  num: 0,
  asyncNum: 0
})

//reducers/index.js 定义方法的名字

import { combineReducers } from 'redux'
//函数里面的counter使用的时候会用到
import counter from './counter'

export default combineReducers({
  counter
})

上面默认生成的目录都有，看懂即可，接下来是如何使用，上面已经定义了两个状态管理的值num和asyncNum：跟vuex也有类似的地方，redux这里使用了connect连接器

//需要使用到num的某个页面

官网https://github.com/sysuzjz/wepy-store
参考https://www.jianshu.com/p/cc9a78d091e7