Najlepsze praktyki do obsługi błędów w Redux i React

Question

Mam funkcji asynchronicznej w moich działaniach Redux i zwraca obiekt jak to w moim reduktora:

{ 
user: {}, 
fetching: false, 
fetched, false, 
error: null 
} 

Więc w zasadzie, kiedy rozpocząć wywołanie funkcji asynchroniczny Update stan Redux do fetching: true i jeśli wynik jest z powodzeniem spełniony wówczas fetched:true i fetching:false
więc odwzorować stan redux do podpór za pomocą połączyć w reagują-Redux i dodałem to w mojej funkcji renderowania komponentu:

if(this.props.fetched) { 
    // Go to next page 
} 

Powoduje automatyczne przejście do następnej strony po pobraniu danych.
Mam jednak problem z obsługą błędów. Gdy błąd zmienia się z wartości null na error, to w jaki sposób obsłużyć obsługę błędów w moim komponencie reagującym. Co mam teraz jest:

if(this.props.error != null) { 
    // popup error 
} 

Ale teraz kończy się w sytuacji, że następnym razem, kiedy zadzwonić do mojego działania, które już zostały this.props.error przypisany do błędu i jego not null, co powoduje, że wyświetlając popup, nawet jeśli nie ma błędu.
Czy muszę resetować mój błąd za każdym razem, gdy jest wyświetlany lub czy istnieje jakaś lepsza praktyka wykonywania tej całej czynności?

Answer 1

Można użyć oprogramowania pośredniego redux-catch do przechwytywania błędów Redux reduktorów i middleware.

Można użyć czegoś podobnego,

import reduxCatch from 'redux-catch'; 

function errorHandler(error, getState, lastAction, dispatch) { 
    //dispatch ERROR action as you need. 
} 

const store = createStore(reducer, applyMiddleware(
    reduxCatch(errorHandler) 
)); 

I wyświetlanie wyskakujących błędów, gdy pojawi się błąd, którego działanie jest wyzwalany od redux-catch middleware. Po zamknięciu wyskakującego okna wywołaj akcję, która resetuje błąd do wartości null, aby wyskakujące okienko nie było wyświetlane, jeśli nie ma błędów do wyświetlenia.

Answer 2

Miałem podobny problem, gdy miałem modal nadal wyświetlać stare błędy po zamknięciu modalu. Rozwiązałem go, wysyłając akcję "resetErrors" po tym, jak otrzymałem sukces za pośrednictwem mojego wywołania zwrotnego.

Nie natknąłem się na lepsze rozwiązanie inne niż "resetowanie" go za każdym razem.