Heim > Artikel > WeChat-Applet > Die Verwendung von Wepy-Redux und die Speicherung globaler Variablen in kleinen Programmen
Wepy empfiehlt die Verwendung von wepy-redux zum Speichern globaler Variablen
// 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 Die Funktion besteht darin, die Methode „store.dispatch“ zu verbessern und zu transformieren
Hier verwenden wir Redux-Promise, um das asynchrone Problem zu lösen
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()in 2. Seite
@connect({ data:(state) => state.base.data //注意这里是base下的state 所有要加上base. })
Typen ist der Funktionsname, der die Aktion auslöst und nur den Funktionsnamen speichert
Erstellen Sie type.js entsprechend dem Modul
//base.js export const GETALLHOMEINFO = 'GETALLHOMEINFO'
Schreiben Sie den Funktionsnamen und exportieren Sie ihn in index.js
export * from './counter' export * from './base'
Folgen Sie ihm: Da die Anwendung komplexer wird, muss die Reduzierfunktion aufgeteilt werden. Nach der Aufteilung ist jedes Teil unabhängig für die Verwaltung eines Teils des Status verantwortlich.
Zu diesem Zeitpunkt werden die Reduzierelemente mehrerer Module zusammengefasst ein endgültiger Reduzierer durch die Funktion combineReducers, das Modul
import { combineReducers } from 'redux' import base from './base' import counter from './counter' export default combineReducers({ base, counter })
verwendet handleActions, um Reduzierer zu verarbeiten, und schreibt mehrere verwandte Reduzierer zusammen
handleActions Es gibt zwei Parameter: Der erste sind mehrere Reduzierer und der zweite ist der Anfangszustand
GETALLHOMEINFO-Reduzierer weist den von der asynchronen Aktion zurückgegebenen Wert den Daten zu
//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)
Aktionen sind die Verarbeitung von Daten
exportiert in index.js
export * from './counter' export * from './base'
createAction wird zum Erstellen einer Aktion verwendet
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>
Empfohlenes Tutorial: „WeChat Mini-Programm“
Das obige ist der detaillierte Inhalt vonDie Verwendung von Wepy-Redux und die Speicherung globaler Variablen in kleinen Programmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!