redux文件都保存在store中
目录
我通过官网demo例子总结下使用方法
demo中用的是这个counter
actions 下面的js ，这个js是额外处理，因为reducer里的方法格式比较固定，不好扩展
//如果 actions 下面没有 对应的方法， 那就调用 reducer的方法
定义用户操作后触发的方法，直接调用types下定义的方法
import { ASYNC_INCREMENT } from '../types/counter'
import { createAction } from 'redux-actions'
//ASYNC_INCREMENT 为types下面定义的方法名
//方法定义在 reducer下面
export const asyncInc = createAction(ASYNC_INCREMENT, () => {
return new Promise(resolve => {
setTimeout(() => {
resolve(1)
}, 1000)
})
})
types下的counter.js
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'
export const ASYNC_INCREMENT = 'ASYNC_INCREMENT'
最后调用的是reducer下面的方法
import { handleActions } from 'redux-actions'
import { INCREMENT, DECREMENT, ASYNC_INCREMENT } from '../types/counter'
export default handleActions({
[INCREMENT] (state) {
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 //这个payload为 actions下面传来
}
}
}, {
num: 0, //定义的数据
asyncNum: 0 //定义的数据
})
页面调用
import wepy from 'wepy'
import { connect } from 'wepy-redux'
import { INCREMENT, DECREMENT } from '../store/types/counter'
import { asyncInc } from '../store/actions'
//connect 第一个大括号里面的是 自己定义的数据名，页面中可用{{stateNum}}获取
@connect({
stateNum (state) {
return state.counter.num //num在 reducer下面已经定义
},
asyncNum (state) {
return state.counter.asyncNum //asyncNum在 reducer下面已经定义
}
}, {
incNum: INCREMENT,
decNum: DECREMENT,
asyncInc
})
