Wie Server/Anschluss Ausnahmen mit Reagieren und Redux thunk in einer verwaltbaren Weise

Question

Ich verwende Redux Thunk behandeln, um Server zu versenden asynchronen Aktionen wie das Abrufen und veröffentlichen. Jeder Aktionsersteller-Aufruf gibt eine Zusage zurück, die aufgibt, wenn nach einem Ajax eine Zauberei ausgeführt wurde, und Redux hat tatsächlich die korrekte Aktion zum Aktualisieren des Status gemäß Erfolg/Fehlschlag von Ajax ausgelöst. Auf diese Weise können wir den Rückruf nach dem Versand auf Komponentenebene anpassen.

doPostActionCreator(data) { 
    return dispatch => { 
    return httpService.post(data) { 
     .then(response => { 
     dispatch({type: POST_SUCCESS, data: response}) 
     return response 
     }) 
     .catch(error => { 
     dispatch({type: POST_ERROR}) 
     return error 
    )} 
    } 
    } 
} 

-

componentsDoPostHandler(data) { 
    this.props.doPostActionCreator(data) 
    .catch(error => { 
     alert(error) 
     this.setState({...}) 
    }) 
} 

Alles ist mit diesem einfachen Beispiel in Ordnung, aber wenn ich versuche, echte Fehler einzuführen dieses Muster Behandlungslogik, wie der Aufruf componentsDoPostHandler rekursiv aus fangen und zu brechen, wenn der Zähler Limit überschreitet, beginnen die Dinge hässlich aussehen, schwer zu pflegen und leicht zu brechen. Was macht denkt noch komplizierter, in meiner realen Welt Szenario ist this.props.doPostActionCreator tatsächlich ein Rückruf von fetchCsrfTokenActionCreator, die sich dieselbe Fehlerbehandlungslogik muss, versucht X-mal zu holen und etwas anderes zu tun, wenn das fehlschlägt. Nun, wenn eine Seite zwei verschiedene Behälter enthält, und sie beide vorstellen, diese Logik, es ist ein ganzes Durcheinander von Bergungsaktionen des letzteren geschickt zu werden, nachdem erstes hat bereits die Erholung durchgeführt, da es nicht möglich ist, einmal Schöpfer genannt Aktion abzubrechen. Am Ende ist es schwer zu lesen, wie das Programm funktioniert und "nicht synchronisierte" Aktionsprobleme entstehen, die Anwendung in einem inkonsistenten Zustand bringt, und diese Probleme sind schwer zu verfolgen.

Das macht mich wundern, wenn ein Versprechen von Aktion Schöpfer Rückkehr eigentlich ein Anti-Muster ist, die schließlich zu wartbaren Code führt. Ich habe keine realen Beispiele dafür gefunden, wie man mit Hilfe von React/Redux-Stack mit asynchronen Service-Fehlern umgehen kann. Mache ich es falsch? Gibt es eine sauberere Möglichkeit, asynchrone Ausnahmen zu behandeln (idealerweise X-mal zu versuchen, Benutzer zu warnen und zur Anmeldeseite zurückzukehren), alles konsistent zu halten, einfach zu verstehen, zu verwalten und asynchrones Chaos zu vermeiden?

Jede mögliche reale Welt Beispiel über das Thema hoch

Answer 1

Ich glaube, geschätzt werden Sie alle Ihre Wiederholungslogik innerhalb der Aktion Schöpfer selbst behandeln kann. Das heißt, ich glaube nicht, Sie brauchen etwas zurück, um zu versuchen .catch() von Ihrer Komponente zu nennen, oder wo auch immer Sie die Aktion Schöpfer sind aufgerufen wird. Denken Sie daran, dass Sie auch Zugriff auf eine getState() Methode innerhalb eines Thunk haben, also sagen Sie in Ihrem Action Creator .post().catch(), Sie können immer etwas versenden, um anzuzeigen, dass etwas fehlgeschlagen ist, was vielleicht von einem Reduzierer behandelt werden könnte, der die Anzahl der Fehler verfolgt und danach der Dispatch-Aufruf .getState(), um zu sehen, wie viele Fehler es gab, und zu entscheiden, was von dort zu tun ist (dh erneut versuchen oder vielleicht eine weitere Aktion versenden, die angibt, dass etwas zu oft fehlgeschlagen ist), die Ihren Status aktualisieren und Ihre Komponenten daraus rendern lassen würde Zustand).

Ich denke, indem Sie sich nicht um .catch() außerhalb Ihrer Aktion Schöpfer Sorgen Sie die Probleme, die Sie sehen, zu vereinfachen. Sie könnten dies möglicherweise auf eine API-Aufrufmethode abstrahieren, die diese Logik für Sie übernimmt, wenn Sie möchten, dass sie in mehreren Aktions-Erstellern auftritt.