wepy-redux

redux 文件

• type

types 里是触发 action 的函数名称 只是存储函数名字

按照模块去创建 type.js

//base.js
export const GETALLHOMEINFO = 'GETALLHOMEINFO'

写好了函数名称 在 index.js 中 export 出来

export * from './counter'
export * from './base'

• reducers

随着应用变得复杂，需要对 reducer 函数 进行拆分，拆分后的每一块独立负责管理 state 的一部分
这个时候多个模块的 reducer 通过 combineReducers 合并成一个最终的 reducer 函数，

import {combineReducers} from 'redux'
import base from './base'
import counter from './counter'

export default combineReducers({
  base,
  counter
})

模块使用 handleActions 来处理 reducer，将多个相关的 reducers 写在一起
handleActions 有两个参数：第一个是多个 reducers，第二个是初始 state

GETALLHOMEINFO reducer 是将异步 action 返回的值赋值给 data

//base.js
import {handleActions} from 'redux-actions'
import {GETALLHOMEINFO} from '../types/base'

const initialState = {data: {}
}
export default handleActions({[GETALLHOMEINFO] (state, action) {
    return {
      ...state,
      data: action.payload
    }
  }
}, initialState)

• actions

actions 是对数据的处理

在 index.js 中 export 出来

export * from './counter'
export * from './base'

createAction 用来创建 Action 的

import {GETALLHOMEINFO} from '../types/base'
import {createAction} from 'redux-actions'
import {Http, Apis} from '../../libs/interface'

export const getAllHoomInfo = createAction(GETALLHOMEINFO, (base) => {
  return new Promise(async resolve => {
    let data = await Http.get({
      url: Apis.ls_url + Apis.allHomeInfo,
      data: {}})
    resolve(data)// 返回到 reduer 的 action.payload
  })
})

• 用法

<script>
  import wepy from 'wepy'
  import {connect} from 'wepy-redux'
  import {getAllHoomInfo} from '../store/actions/base.js'// 引入 action 方法
  import {getStore} from 'wepy-redux'
 
  const store = getStore()
  
  @connect({data(state) {return state.base.data // 注意这里是 base 下的 state 所有要加上 base.}
  }, {getAllHoomInfo})

  export default class Index extends wepy.page {data = {}

    computed = { }

    onLoad() {store.dispatch(getAllHoomInfo(store.getState().base))
    }
    
  }
</script>