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的某个页面
<template>
  <view>
    <text> {{stateNum}} </text>
    <text> {{asyncNum}} </text>
  </view>
</template>
<script>
  import wepy from 'wepy'
  //引入connect连接器
  import { connect } from 'wepy-redux'
  //引入定义的方法
  import { INCREMENT, DECREMENT } from '../store/types/counter'
  import { asyncInc } from '../store/actions'

  @connect({
    stateNum (state) {
    //这里state后面的counter就是刚刚reducers/index.js里面定义的名字
      return state.counter.num
    },
    asyncNum (state) {
      return state.counter.asyncNum
    }
  }, {
    //这里也可以用es6的语法简写
    incNum: INCREMENT,
    decNum: DECREMENT,
    asyncInc
  })
export default class Index extends wepy.page {
  ...
 
    onLoad() {
      //如果需要在这里面调用incNum，而不是this.incNum()
      this.methods.incNum();
      //如果需要在这里面使用num的值
      this.stateNum;
      console.log(this.stateNum);//先打印1,后打印2---执行了两遍onLoad
    }
}
</script>

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