Wepy recommends using wepy-redux to store global variables
// 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 }
applyMiddleware The function of the function is to enhance and transform the store.dispatch method
Here is to use redux-promise to solve the asynchronous problem
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()
@connect({ data:(state) => state.base.data //注意这里是base下的state 所有要加上base. })
Types is the name of the function that triggers the action. It just stores the function name.
Create type.js according to the module
//base.js export const GETALLHOMEINFO = 'GETALLHOMEINFO'
After writing the function name, export it in index.js
export * from './counter' export * from './base'
Follow As the application becomes more complex, the reducer function needs to be split. Each piece after the split is independently responsible for managing a part of the state.
At this time, the reducers of multiple modules are combined into a final reducer through combineReducers Function,
import { combineReducers } from 'redux' import base from './base' import counter from './counter' export default combineReducers({ base, counter })
module uses handleActions to process the reducer, and writes multiple related reducers together
handleActions There are two parameters: the first is multiple reducers, and the second is the initial state
GETALLHOMEINFO reducer assigns the value returned by the asynchronous action to 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 is the processing of data
Exported in index.js
export * from './counter' export * from './base'
createAction is used to create 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>
Recommended tutorial: "WeChat Mini Program"
The above is the detailed content of The use of wepy-redux and storage of global variables in small programs. For more information, please follow other related articles on the PHP Chinese website!