Maison >Applet WeChat >Développement de mini-programmes >L'utilisation de wepy-redux et le stockage de variables globales dans de petits programmes
Il est recommandé d'utiliser wepy-redux pour stocker les variables globales dans wepy
// 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 La fonction est d'améliorer et de transformer la méthode store.dispatch
Ici, nous utilisons redux-promise pour résoudre le problème asynchrone
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()en 2.page
@connect({ data:(state) => state.base.data //注意这里是base下的state 所有要加上base. })
types est le nom de la fonction qui déclenche l'action et stocke simplement le nom de la fonction
Create type.js selon le module
//base.js export const GETALLHOMEINFO = 'GETALLHOMEINFO'
Ecrivez le nom de la fonction et exportez-le dans index.js
export * from './counter' export * from './base'
Suivez-le À mesure que l'application devient plus complexe, la fonction de réduction doit être divisée. Chaque bloc après la division est indépendamment responsable de la gestion d'une partie de l'état
À l'heure actuelle, les réducteurs de plusieurs. les modules sont combinés dans un réducteur final via la fonction combineReducers, le module
import { combineReducers } from 'redux' import base from './base' import counter from './counter' export default combineReducers({ base, counter })
utilise handleActions pour traiter les réducteurs et écrit plusieurs réducteurs ensemble
handleActions Il y a deux paramètres : le premier est plusieurs réducteurs et le second est l'état initial
Le réducteur GETALLHOMEINFO attribue la valeur renvoyée par l'action asynchrone aux données
//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)
les actions sont le traitement des données
exportées dans index.js
export * from './counter' export * from './base'
createAction est utilisé pour créer une 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>
Tutoriel recommandé : "WeChat Mini Program"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!