小程序中wepy-redux的使用以及存储全局变量

wepy里推荐使用wepy-redux存储全局变量使用1.初始化store// app.wpyimport { setStore } from 'wepy-redux'import configStore from './store'const store = configStore()setStore(store) //setStore是将store注入到所有页面中// store文件夹下的index.jsimport { createStore, applyMiddleware } from 'redux'import promiseMiddleware from 'redux-promise'import rootReducer from './reducers'export default function configStore () {const store = createStore(rootReducer, applyMiddleware(promiseMiddleware)) //生成一个 store 对象return store}applyMiddleware 函数的作用就是对 store.dispatch 方法进行增强和改造这里就是使用redux-promise来解决异步2.page里面获取storeimport { getStore } from 'wepy-redux' const store = getStore()// dispatchstore.dispatch({type: 'xx', payload: data}) //xx是reducer名字 payload就是携带的数据store.dispatch(getAllHoomInfo(store.getState().base)) //xx是action名字//获取stateconst state = store.getState()3.连接组件@connect({data:(state) => state.base.data //注意这里是base下的state 所有要加上base.})文件介绍redux文件typetypes里是触发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)actionsactions是对数据的处理

在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) => state.base.data})export default class Index extends wepy.page {data = {}computed = {}onLoad() {store.dispatch(getAllHoomInfo(store.getState().base))}}</script>推荐教程：《微信小程序》以上就是小程序中wepy-redux的使用以及存储全局变量的详细内容，更多请关注小潘博客其它相关文章！