wepy-redux

redux文件

• type

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

按照模块去创建type.js

//base.jsexport 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.jsimport { 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>