按照官方生成的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
