React Redux: Catching Fehler in den Komponenten

Question

Schnelle Frage zu reagieren, ist etwas falsch mit dem Code unten? Ich habe so etwas schon einmal gemacht, fühlte mich aber nicht wohl dabei, HTTP-Fehler innerhalb der Komponente zu erfassen, anstatt eine FAILURE_ACTION zu versenden. Der Grund dafür ist, dass ich unnötige Zustände in meinem Laden habe nur einmal verwendet und macht keinen Sinn für die gesamte Lebensdauer der Anwendung zu leben.

Aktion

const createAccount = data => dispatch => axios.get().then(() => { 
    dispatch({ type: 'SIGNUP' }); 
}) 

Komponente

export default class SignupForm extends Component { 
    handleSubmit =() => { 
     createAccount.catch(function (err) { 
     this.setState({ error: err.message }); 
     }); 
    } 

    render(){ 
     return (
      <form onSubmit={handleSubmit}> 
      <span>{this.state.error}</span> 
      //...fields 
      </form> 
    ); 
    } 
} 

Answer 1

Weder Reagieren noch Redux schreibt vor, dass Sie etwas in einer bestimmten Weise tun sollten. Sie haben natürlich Best Practices und Empfehlungen, aber wenn der Code für Sie funktioniert, dann rollen Sie damit.

Das gesagt, im Allgemeinen ist es eine gute Idee, Ihre Komponenten so einfach wie möglich zu halten und diese Art von Logik anderswo zu verschieben. Es hält Ihre Komponente sauber und frei von Nebenwirkungen, wodurch sie wartungsfreundlicher und einfacher zu verstehen sind. Das ist einer der Gründe, warum externe staatliche Manager überhaupt existieren.

In Ihrem Beispiel haben Sie jetzt zwei Pfade, die verfolgt werden können, einer in Redux und der andere in Ihrer Komponente. Welcher Teil Ihres Codes ist für die Fehlerbehandlung verantwortlich? Welcher Fehler ist genau in Ihrer Komponente gefangen? Könnte es sich auch um einen Fehler handeln, der durch einen Codierungsfehler in Ihrem Reducer verursacht wurde (wie bei einem Antwortstatus vom Axios-Aufruf)? Müssen alle Komponenten ihre eigene Fehlerbehandlung implementieren?

Auch würde ich erwarten, dass createAccount eine Funktion ist und createAccount(). Catch kann nur funktionieren, wenn diese Funktion die Axios Versprechen zurückgeben.

Answer 2

Wenn es eine andere Komponente gibt, die wissen möchte, ob der Anmeldevorgang fehlgeschlagen ist und diese Informationen von anderen Komponenten beibehalten oder von einem Entwickler überprüft werden müssen, um den Programmstatus zu verstehen, sollte er einspringen der Redux-Laden.

Aber hier in Ihrem Fall denke ich, dass es keinen Bedarf gibt, den Status zu Redux zu externalisieren, und es macht durchaus Sinn, den lokalen Zustand der Komponente zu verwenden, um mit Fehlern umzugehen.