Die Verwendung von Wepy-Redux und die Speicherung globaler Variablen in kleinen Programmen

Wepy empfiehlt die Verwendung von wepy-redux zum Speichern globaler Variablen

Verwenden Sie

1. Initialisieren Sie den Speicher

// 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

Store abrufen

---

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

3. Verbindungskomponenten

@connect({
    data:(state) => state.base.data //注意这里是base下的state 所有要加上base.
})

Dateieinführung

Redux-Datei

Typ

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'

Reduzierer

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

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**
  })
})

Verwendung

<script>
  import wepy from &#39;wepy&#39;
  import { connect } from &#39;wepy-redux&#39;
  import { getAllHoomInfo } from &#39;../store/actions/base.js&#39;// 引入action方法
  import { getStore } from &#39;wepy-redux&#39;

  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!