Detaillierte Einführung in asynchrone Redux-Operationen (Codebeispiel)

Dieser Artikel bietet Ihnen eine detaillierte Einführung (Codebeispiel) über asynchrone Redux-Operationen. Ich hoffe, dass er für Freunde hilfreich ist.

1. Redux-Grundlagen

Redux

• Durch Versand(Aktion) - > Middleware -> Reduzierer verarbeitet Daten -> Verwenden Sie subscribe(), um Store-Änderungen zu überwachen und Ansichten zu aktualisieren.

• Speichern Sie alle Zustände in einem Store Der Reduzierer im Objekt

• ist eine reine Funktion, und die asynchrone Operation enthält aufgrund der Unsicherheit des Ergebnisses Nebenwirkungen, sodass eine besondere Behandlung erforderlich ist

react-redux
Containerkomponente, verantwortlich für die Verwaltung von Daten und Geschäftslogik, nicht verantwortlich für die UI-Präsentation
UI-Komponente, stellt UI-Präsentation bereit, zustandslos bedeutet, dass this.state nicht verwendet wird, alle Zustände werden von this.props bereitgestellt.
Die Containerkomponente wird von connect generiert. Bei jeder Änderung des Speichers erhält connect zwei Parameter: mapStateToProps, mapDispatchToProps
mapStateToProps, die den Status den Requisiten von zuordnet die UI-Komponente
mapDispatchToProps, die die Dispatch-Methode der UI zuordnet. Die Requisiten der Komponente
Die Anbieterkomponente verwendet die Inhalts-API, um den Store von der obersten Ebene an jede Komponentenebene zur Verbindungsverwendung zu übergeben

2. Redux-Middleware für die asynchrone Verarbeitung

Redux-Thunk
Redux-Thunk-Middleware ermöglicht, dass Aktion eine Methode ist
Nach dem Empfang der Aktion , die Middleware führt die Aktionsmethode aus und liefert das Ergebnis an den Reduzierer
Aktionsverwirrung führt zu Schwierigkeiten bei der Wartung
redux-saga
Saga hört die Aktion ab und führt Effektoperationen basierend aus auf diese Aktion
Effects bietet flexible APIs, einschließlich blockierender und nicht blockierender Aufrufe, Abbruch, Warten, Rennen und anderer Vorgänge
Bequem zum Isolieren und Durchführen asynchroner Vorgänge und einfach zu testen

3. redux-request-async-middleware

Beginnen wir mit der asynchronen Aktion im Redux-Dokument. Jeder Schnittstellenaufruf erfordert das Versenden von drei Synchronisierungsaktionen:
Eine Aktion, die benachrichtigt Reduzierer, dass die Anfrage gestartet wurde. Für diese Art von Aktion kann der Reduzierer das isFetching-Tag im Status ändern. Dadurch wird die Benutzeroberfläche angewiesen, die Ladeschnittstelle anzuzeigen.
Eine Aktion, die den Reduzierer darüber benachrichtigt, dass die Anfrage erfolgreich ist. Für diese Art von Aktion kann der Reduzierer die neu empfangenen Daten mit dem Status zusammenführen und isFetching zurücksetzen. Die Benutzeroberfläche blendet die Ladeschnittstelle aus und zeigt die empfangenen Daten an.
Eine Aktion, die den Reduzierer darüber benachrichtigt, dass die Anfrage fehlgeschlagen ist. Für diese Art von Aktion kann der Reduzierer isFetching zurücksetzen. Darüber hinaus speichern einige Reduzierer diese Fehlerinformationen und zeigen sie in der Benutzeroberfläche an.
Das heißt, eine Schnittstelle wird so initiiert

dispatch(fetchPostsRequest(subject));
fetch(url).then(res => {
  dispatch(fetchPostsSuccess(subject, res));
}).catch(e => {
  dispatch(fetchPostsFailure(subject, e));
})

kapselt diesen Vorgang nur in Middleware. Das Besondere ist:

• Gemeinsam mit allen asynchronen Anforderungen Diese drei Aktionen

• Betreff verwenden, um zu unterscheiden, welche Anfrage

• alle Ergebnisse in store.requests ablegen

Middleware-Quellcode

export const reduxRequest = store => next => action => {
  let result = next(action);
  let { type, subject, model } = action;
  let _next = action.next;
  if(type === FETCH_POSTS_REQUEST) {
    model().then(response => {
      _next && _next(response);
      store.dispatch(fetchPostsSuccess(subject, response));
    }).catch(error => {
      console.error(error);
      store.dispatch(fetchPostsFailure(subject, error));
    });
  }
  return result
};/

• Wie Redux-Thunk, fügen Sie die Methode in die Aktion

• in der Mitte ein. Die Software fängt die Aktion FETCH_POSTS_REQUEST ab und führt eine asynchrone Verarbeitung durch

Reduzierer-Quellcode

export const requests = (state = {}, action) => {
  switch (action.type) {
    case FETCH_POSTS_REQUEST:
      return assign({},
        state,
        {
          [action.subject]: {
            isFetching: true,
            state: 'loading',
            subject: action.subject,
            response: null,
            error: null,
          }
        }
      );
    case FETCH_POSTS_FAILURE:
      return assign({},
        state,
        {
          [action.subject]: {
            isFetching: false,
            state: 'error',
            subject: action.subject,
            response: state[action.subject].response,
            error: action.error,
          }
        }
      );
    case FETCH_POSTS_SUCCESS:
      return assign({},
        state,
        {
          [action.subject]: {
            isFetching: false,
            state: 'success',
            subject: action.subject,
            response: action.response,
          }
        }
      );
    case FETCH_POSTS_CLEAR:
      return assign({},
        state,
        {
          [action.subject]: {
            isFetching: false,
            state: 'cleared',
            subject: null,
            response: null,
            error: null,
          }
        }
      )
      return state;
  }
}

• Fügen Sie das Ergebnis in die Antwort ein, die dem Betreff entspricht. Wenn es falsch ist, geben Sie die Fehlerinformationen ein in Fehler

• isFetching zeigt den aktuellen Anfragestatus an

• Darüber hinaus werden der aktuelle Status und Betreffinformationen hinzugefügt

Kapseln Sie die Anfrage

const request = (subject, model, next) => {
  _dispatch(fetchPostsRequest(subject, model, next));
  return true;
};

• Schreiben Sie eine Methode zum Initiieren der FETCH_POSTS_REQUEST-Aktion

• Mit anderen Worten: Schreiben Sie beim Erstellen einer Anfrage, Sie müssen sich nicht mehr um die Aktion kümmern. Rufen Sie einfach die Anfragemethode

auf, um das Ergebnis zu kapseln

const getResponse = state =>
  state
  && state.response !== null
  && state.response;
 
const getLoading = (states = []) =>
  states.reduce((pre, cur) =>
    pre || (cur && cur.isFetching)
    , false)
  || false;

1. , um das Ergebnis zu erhalten und mehrere Der Ladestatus unter der Anforderung

2. verfügt über mehr Operationen oder Formate und kann weiterhin gekapselt werden, z. B. Liste

4. Zusammenfassung

1. Verwendet Redux für die Zustandsverwaltung, ohne die komplexe Logik von Redux zu schreiben, wodurch die Komplexität asynchroner Vorgänge minimiert wird

2. Geeignet für Projekte, bei denen das Front-End Daten über Schnittstellen verarbeitet und speichert

3. Die Schnittstelle wird von Redux verwaltet, während die Ansichtskomponenten vom internen Status verwaltet werden und nur einfache Schnittstellen extern verfügbar gemacht werden Trennen Sie zum Betrieb die Geschäftsschicht und die Ansichtsschicht

4. Im Vergleich zur neuen Inhalts-API von React 16.3 liegt der Vorteil von Redux in der Hot-Insert-Middleware und der reinen Schreibmethode zur Funktionsreduzierung

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in asynchrone Redux-Operationen (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!