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

hzc

Freigeben： 2020-06-20 11:06:39

nach vorne

3115 Leute haben es durchsucht

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注入到所有页面中

Nach dem Login kopieren

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

Nach dem Login kopieren

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()

Nach dem Login kopieren

in 2. Seite

3. Verbindungskomponenten

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

Nach dem Login kopieren

Dateieinführung

Redux-Datei

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

Typ

Typen ist der Funktionsname, der die Aktion auslöst und nur den Funktionsnamen speichert

Erstellen Sie type.js entsprechend dem Modul

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

//base.js
export const GETALLHOMEINFO = 'GETALLHOMEINFO'

Nach dem Login kopieren

Schreiben Sie den Funktionsnamen und exportieren Sie ihn in index.js

export * from './counter'
export * from './base'

Nach dem Login kopieren

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

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

import { combineReducers } from 'redux'
import base from './base'
import counter from './counter'

export default combineReducers({
  base,
  counter
})

Nach dem Login kopieren

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)

Nach dem Login kopieren

Aktionen

Aktionen sind die Verarbeitung von Daten
Die Verwendung von Wepy-Redux und die Speicherung globaler Variablen in kleinen Programmen

exportiert in index.js

export * from './counter'
export * from './base'

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!