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));
})Nach dem Login kopieren
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
};/Nach dem Login kopieren
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;
}
}Nach dem Login kopieren
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;
};Nach dem Login kopieren
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;
Nach dem Login kopieren
, um das Ergebnis zu erhalten und mehrere Der Ladestatus unter der Anforderung
verfügt über mehr Operationen oder Formate und kann weiterhin gekapselt werden, z. B. Liste
4. Zusammenfassung
Verwendet Redux für die Zustandsverwaltung, ohne die komplexe Logik von Redux zu schreiben, wodurch die Komplexität asynchroner Vorgänge minimiert wird
Geeignet für Projekte, bei denen das Front-End Daten über Schnittstellen verarbeitet und speichert
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
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!
