Detaillierte Erläuterung praktischer Redux-Thunk-Projektfälle

Dieses Mal werde ich Ihnen eine detaillierte Erklärung des praktischen Redux-Thunk-Projekts geben. Was sind die Vorsichtsmaßnahmen für die Verwendung des praktischen Redux-Thunk-Projekts?

Das Kernkonzept von Redux ist eigentlich sehr einfach: Speichern Sie den Zustand, der geändert werden muss, im Speicher, initiieren Sie eine Aktion, um zu beschreiben, was passiert ist, und verwenden Sie Reduzierer, um zu beschreiben, wie die Aktion den Zustandsbaum ändert. Wenn Sie einen Shop erstellen, müssen Sie den Reduzierer übergeben. Was die Daten im Store wirklich ändern kann, ist die Store.dispatch-API.

1. Konzept

Nachdem Sie eine Aktion ausgelöst haben und bevor Sie den Reduzierer erreichen, müssen Sie Middleware verwenden, um einige zusätzliche Vorgänge auszuführen. Sie können Redux-Middleware zum Protokollieren, Erstellen von Absturzberichten, Aufrufen asynchroner Schnittstellen oder Routing und mehr verwenden.
Mit anderen Worten, Middleware ist eine Erweiterung von store.dispatch()

2. Verwendung von Middleware

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
const store = createStore(
  reducers, 
  applyMiddleware(thunk)
);

Führen Sie die Thunk-Middleware direkt ein und fügen Sie sie in die applyMiddleware ein Durch die Übergabe der Methode createStore wird die Funktionserweiterung von store.dispatch() abgeschlossen. Das heißt, Sie können im Reduzierer einige asynchrone Vorgänge ausführen.

3.applyMiddleware()

Tatsächlich ist applyMiddleware eine native Methode von Redux, die alle Middleware in einem Array zusammenfasst und sie nacheinander ausführt.

Wenn Sie mehr Middleware haben, können Sie diese einzeln als Parameter übergeben

const store = createStore(
  reducers, 
  applyMiddleware(thunk, logger)
);

Wenn Sie die Entwicklung verstehen möchten, können Sie die offizielle Dokumentation von Redux aufrufen: https:/ /redux.js.org/advanced/middleware

4.redux-thunk

Analysieren Sie den Quellcode von redux-thunk node_modules/redux-thunk/src/index .js

function createThunkMiddleware(extraArgument) {
 return ({ dispatch, getState }) => next => action => {
  if (typeof action === 'function') {
   return action(dispatch, getState, extraArgument);
  }
  return next(action);
 };
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;

redux-thunk Der Middleware-Exportstandard ist der von createThunkMiddleware() übergebene Thunk. Wenn man sich die Funktion createThunkMiddleware ansieht, gibt sie eine Curry-Funktion zurück. Der Code, den wir in ES5 übersetzen, ist einfacher zu lesen.

function createThunkMiddleware(extraArgument) {
  return function({ dispatch, getState }) {
    return function(next){
      return function(action){
        if (typeof action === 'function') {
          return action(dispatch, getState, extraArgument);
        }
        return next(action);
      };
    }
  }
}

Anhand dieses Blicks können wir erkennen, dass die wichtigste Idee von Redux-Thunk darin besteht, dass es einen Aktionsersteller akzeptieren kann, der eine Funktion zurückgibt. Wenn der Aktionsersteller eine Funktion zurückgibt, führen Sie sie aus. Wenn nicht, führen Sie sie gemäß der ursprünglichen nächsten Aktion aus.

Da dieser Aktionsersteller eine Funktion zurückgeben kann, können Sie in dieser Funktion einige asynchrone Vorgänge ausführen.

Zum Beispiel:

export function addCount() {
  return {type: ADD_COUNT}
}
export function addCountAsync() {
  return dispatch => {
    setTimeout( () => {
      dispatch(addCount())
    },2000)
  }
}

Die Funktion „addCountAsync“ gibt eine Funktion zurück, übergibt „dispatch“ als ersten Parameter der Funktion und führt asynchrone Vorgänge innerhalb der Funktion aus.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie JS, um die Daten der letzten 7 Tage und der letzten 3 Tage abzurufen

Angular ng-animate und Verwendung von ng-cookies im Projekt

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung praktischer Redux-Thunk-Projektfälle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!