wepy-redux的使用

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
  })