Warum Middleware für asynchrone Aktionen in Redux verwenden?

Warum benötigen wir Middleware für den asynchronen Datenfluss in Redux?

Es mag zunächst den Anschein haben, dass Redux den asynchronen Datenfluss nicht unterstützt, da er dies spezifiziert dass „Redux Store nur synchronen Datenfluss unterstützt.“ Dies ist jedoch nicht der Fall.

Im gegebenen Beispiel kann die Containerkomponente durchaus die asynchrone API aufrufen und anschließend die notwendigen Aktionen auslösen. Tatsächlich funktioniert dieser Ansatz ordnungsgemäß, wie die Aktualisierung des Feldes beim Klicken auf die Schaltfläche zeigt.

Was ist dann das Problem mit dieser Strategie?

Die Die größte Sorge entsteht im Zusammenhang mit einer größeren Anwendung, bei der zahlreiche Komponenten möglicherweise identische Aktionen ausführen oder bei der es wünschenswert sein kann, Funktionen wie Entprellung zu integrieren. Darüber hinaus kann es von Vorteil sein, lokale Status-nahe Aktionsersteller für Aufgaben wie das automatische Inkrementieren von IDs beizubehalten.

Aus Wartungssicht vereinfacht es die Unterteilung von Aktionserstellern in verschiedene Funktionen, was die Entwicklung und Wartung vereinfacht Codebasis.

Während Middleware wie Redux Thunk oder Redux Promise eine Codevereinfachung durch syntaktischen Zucker bietet, ist dies für den Zweck der Handhabung nicht unbedingt erforderlich asynchrone Aktionen.

Ohne Middleware:

Ohne Middleware können Aktionsersteller asynchrone Vorgänge direkt ausführen, wie unten dargestellt:

function loadData(dispatch, userId) {
  fetch(`http://data.com/${userId}`)
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
    );
}

// in component
componentWillMount() {
  loadData(this.props.dispatch, this.props.userId); // pass dispatch as argument for async action creator
}

Mit Thunk Middleware:

Redux Thunk bietet eine prägnantere Syntax für Versenden asynchroner Aktionen:

function loadData(userId) {
  return dispatch =>
    fetch(`http://data.com/${userId}`)
      .then(res => res.json())
      .then(
        data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
        err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
      );
}

// in component
componentWillMount() {
  this.props.dispatch(loadData(this.props.userId)); // dispatch as usual
}

Vorteile von Middleware:

Die Hauptvorteile der Verwendung von Middleware wie Redux Thunk liegen in der Entkopplung von Komponenten von den Implementierungsdetails des Aktionserstellers. Komponenten wissen nicht, ob ein Aktionsersteller synchron oder asynchron ist und ob er mit dem Redux-Status oder anderen Aktionserstellern interagiert.

Alternativen zur Middleware:

Redux Thunk ist nicht der einzige Ansatz zur Verarbeitung asynchroner Anforderungen in Redux-Anwendungen. Eine weitere überzeugende Alternative ist Redux Saga, die die Definition lang andauernder „Sagas“ ermöglicht, die auf eingehende Aktionen einwirken und Anforderungen umwandeln oder ausführen, bevor weitere Aktionen erzeugt werden.

Das obige ist der detaillierte Inhalt vonWarum Middleware für asynchrone Aktionen in Redux verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!