小程序中wepyredux的使用以及存储全局变量

1.初始化store

// app.wpy
import { setStore } from &＃39;wepy-redux&＃39;
import configStore from &＃39;./store&＃39;

const store = configStore()
setStore(store) //setStore是将store注入到所有页面中

// store文件夹下的index.js

import { createStore, applyMiddleware } from &＃39;redux&＃39;
import promiseMiddleware from &＃39;redux-promise&＃39;
import rootReducer from &＃39;./reducers&＃39;

export default function configStore () {
  const store = createStore(rootReducer, applyMiddleware(promiseMiddleware)) //生成一个 store 对象
  return store
}

applyMiddleware 函数的作用就是对 store.dispatch 方法进行增强和改造
这里就是使用redux-promise来解决异步

2.page里面获取store

import { getStore } from &＃39;wepy-redux&＃39;
 
const store = getStore()

// dispatch
store.dispatch({type: &＃39;xx&＃39;, payload: data}) //xx是reducer名字 payload就是携带的数据
store.dispatch(getAllHoomInfo(store.getState().base)) //xx是action名字

//获取state
const state = store.getState()

3.连接组件

@connect({
    data:(state) => state.base.data //注意这里是base下的state 所有要加上base.
})

redux文件

//base.js
export const GETALLHOMEINFO = &＃39;GETALLHOMEINFO&＃39;

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

export * from &＃39;./counter&＃39;
export * from &＃39;./base&＃39;

reducers

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

import { combineReducers } from &＃39;redux&＃39;
import base from &＃39;./base&＃39;
import counter from &＃39;./counter&＃39;

export default combineReducers({
  base,
  counter
})

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

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

//base.js
import { handleActions } from &＃39;redux-actions&＃39;
import { GETALLHOMEINFO } from &＃39;../types/base&＃39;

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

actions

actions是对数据的处理

在index.js中export出来

export * from &＃39;./counter&＃39;
export * from &＃39;./base&＃39;

createAction用来创建Action的

import { GETALLHOMEINFO } from &＃39;../types/base&＃39;
import { createAction } from &＃39;redux-actions&＃39;
import { Http, Apis } from &＃39;../../libs/interface&＃39;

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

推荐教程：《微信小程序》

以上就是小程序中wepy-redux的使用以及存储全局变量的详细内容，更多请关注其它相关文章！