使用

1.初始化store

// app.wpy import { setStore } from 'wepy-redux' import configStore from './store'  const store = configStore() setStore(store) //setStore是将store注入到所有页面中

// store文件夹下的index.js  import { 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 }

2.page里面获取store

import { getStore } from 'wepy-redux'   const store = getStore()  // dispatch store.dispatch({type: 'xx', 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文件

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) => state.base.data   })    export default class Index extends wepy.page {     data = {     }      computed = {     }      onLoad() {       store.dispatch(getAllHoomInfo(store.getState().base))     }        } </script>

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

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