Ich habe einen Reduzierer für Clients, einen anderen für AppToolbar und einige andere ...
Nehmen wir nun an, ich habe eine Abrufaktion zum Löschen des Clients erstellt. Wenn dies fehlschlägt, befindet sich im Clients-Reduzierer Code, der einige Aufgaben ausführen sollte, aber ich möchte auch einen globalen Fehler in der AppToolbar anzeigen.
Die Clients und die AppToolbar-Reduzierungen teilen sich jedoch nicht denselben Teil des Status, und ich kann keine neue Aktion im Reduzierer erstellen.
Wie soll ich also einen globalen Fehler anzeigen? Vielen Dank
UPDATE 1:
Ich vergessen zu erwähnen , dass ich este devstack
UPDATE 2: Ich habe Erics Antwort als richtig markiert, aber ich muss sagen, dass die Lösung, die ich in Wertschätzung verwende, eher einer Kombination aus Eric und Dans Antwort entspricht ... Sie müssen nur herausfinden, was am besten zu Ihrem Code passt. .
quelle
Antworten:
Wenn Sie das Konzept "globaler Fehler" haben möchten, können Sie einen
errors
Reduzierer erstellen , der auf Aktionen von addError, removeError usw. warten kann. Anschließend können Sie sich in Ihren Redux-Statusbaum unter einbindenstate.errors
und diese nach Bedarf anzeigen.Es gibt eine Reihe von Möglichkeiten, wie Sie dies angehen können, aber die allgemeine Idee ist, dass globale Fehler / Nachrichten ihren eigenen Reduzierer verdienen würden, um völlig getrennt von
<Clients />
/ zu leben<AppToolbar />
. Wenn eine dieser Komponenten Zugriff benötigt, könnenerrors
Sie sie natürlicherrors
überall dort als Requisite weitergeben, wo dies erforderlich ist.Update: Codebeispiel
Hier ist ein Beispiel dafür, wie es aussehen könnte, wenn Sie die "globalen Fehler"
errors
an Ihre oberste Ebene übergeben<App />
und unter bestimmten Bedingungen rendern würden (wenn Fehler vorhanden sind). Verwenden Sie React-Reduxconnect
, um Ihre<App />
Komponente mit einigen Daten zu verbinden.Und was den Aktionsersteller betrifft, würde er gemäß der Antwort einen Erfolgsfehler ( Redux-Thunk ) auslösen
Während Ihr Reduzierer einfach eine Reihe von Fehlern verwalten kann, können Sie Einträge entsprechend hinzufügen / entfernen.
quelle
catch
Funktionen aufzurufen, wennsomeHttpClient.get('/resources')
oderfetch('/resources')
die ich in meiner Code-Rückgabe verwende500 Server Error
. Haben Sie irgendwelche Gedanken, bei denen ich einen Fehler machen könnte? Im Wesentlichen sende ichfetch
eine Anfrage, die mit meiner endet,routes
wobei ich eine Methode für meinmongoose
Modell aufrufe, um etwas sehr Einfaches zu tun, wie das Hinzufügen eines Textes oder das Entfernen eines Textes aus der Datenbank.Eriks Antwort ist richtig, aber ich möchte hinzufügen, dass Sie keine separaten Aktionen auslösen müssen, um Fehler hinzuzufügen. Ein alternativer Ansatz besteht darin, einen Reduzierer zu haben, der jede Aktion mit einem
error
Feld verarbeitet . Dies ist eine Frage der persönlichen Wahl und Konvention.Beispiel aus dem Redux-
real-world
Beispiel mit Fehlerbehandlung:quelle
error
die Nutzlast an die Aktion anfügt. Danke Dan!Der Ansatz, den ich derzeit für einige bestimmte Fehler (Validierung von Benutzereingaben) verfolge, besteht darin, dass meine Unterreduzierer eine Ausnahme auslösen, sie in meinem Stammreduzierer abfangen und an das Aktionsobjekt anhängen. Dann habe ich eine Redux-Saga, die Aktionsobjekte auf einen Fehler untersucht und in diesem Fall den Statusbaum mit Fehlerdaten aktualisiert.
So:
Und dann ist das Hinzufügen des Fehlers zum Statusbaum wie von Erik beschrieben.
Ich benutze es ziemlich sparsam, aber es verhindert, dass ich Logik duplizieren muss, die legitimerweise in den Reduzierer gehört (damit es sich vor einem ungültigen Zustand schützen kann).
quelle
Schreiben Sie eine benutzerdefinierte Middleware, um alle API-bezogenen Fehler zu behandeln. In diesem Fall wird Ihr Code sauberer.
quelle
if
in einen Reduzierer schreibenIch zentralisiere die gesamte Fehlerbehandlung im Effekt pro Effekt
quelle
Sie können den axios HTTP-Client verwenden. Die Interceptors-Funktion wurde bereits implementiert. Sie können Anforderungen oder Antworten abfangen, bevor sie bis dahin bearbeitet oder abgefangen werden.
https://github.com/mzabriskie/axios#interceptors
quelle