Jaki jest najlepszy sposób radzenia sobie z błędem pobierania w React Redux?

Mam jeden reduktor dla Klientów, drugi dla AppToolbar i kilka innych ...

Teraz powiedzmy, że utworzyłem akcję pobierania, aby usunąć klienta, a jeśli to się nie powiedzie, mam kod w reduktorze klientów, który powinien coś zrobić, ale chcę również wyświetlić jakiś globalny błąd w AppToolbar.

Ale Klienci i reduktory AppToolbar nie mają tej samej części stanu i nie mogę utworzyć nowej akcji w reduktorze.

Jak więc mam pokazać błąd globalny? Dzięki

AKTUALIZACJA 1:

Zapomniałem wspomnieć, że używam este devstack

AKTUALIZACJA 2: Oznaczyłem odpowiedź Erica jako poprawną, ale muszę powiedzieć, że rozwiązanie, którego używam z szacunkiem, jest bardziej jak połączenie odpowiedzi Erica i Dana ... Po prostu musisz znaleźć to, co najlepiej pasuje do twojego kodu. .

Jeśli chcesz mieć pojęcie „błędów globalnych”, możesz utworzyć errorsreduktor, który może nasłuchiwać akcji addError, removeError, itp. Następnie możesz podłączyć się do swojego drzewa stanu Redux pod adresem state.errorsi wyświetlać je w odpowiednim miejscu.

Istnieje wiele sposobów rozwiązania tego problemu, ale ogólna idea jest taka, że ​​globalne błędy / komunikaty zasługują na to, by ich własny reduktor działał całkowicie niezależnie od <Clients />/ <AppToolbar />. Oczywiście, jeśli którykolwiek z tych elementów wymaga dostępu, errorsmożesz przekazać errorsje jako rekwizyt, gdy zajdzie taka potrzeba.

Aktualizacja: przykład kodu

Oto jeden przykład tego, jak mogłoby to wyglądać, gdybyś przekazał „błędy globalne” errorsna najwyższy poziom <App />i warunkowo je wyrenderował (jeśli występują błędy). Korzystanie z React-Reduxconnect do połączenia <App />komponentu z niektórymi danymi.

// App.js
// Display "global errors" when they are present
function App({errors}) {
  return (
    <div>
      {errors && 
        <UserErrors errors={errors} />
      }
      <AppToolbar />
      <Clients />
    </div>
  )
}

// Hook up App to be a container (react-redux)
export default connect(
  state => ({
    errors: state.errors,
  })
)(App);

A jeśli chodzi o twórcę akcji, spowodowałoby to ( redux-thunk ) niepowodzenie sukcesu zgodnie z odpowiedzią

export function fetchSomeResources() {
  return dispatch => {
    // Async action is starting...
    dispatch({type: FETCH_RESOURCES});

    someHttpClient.get('/resources')

      // Async action succeeded...
      .then(res => {
        dispatch({type: FETCH_RESOURCES_SUCCESS, data: res.body});
      })

      // Async action failed...
      .catch(err => {
        // Dispatch specific "some resources failed" if needed...
        dispatch({type: FETCH_RESOURCES_FAIL});

        // Dispatch the generic "global errors" action
        // This is what makes its way into state.errors
        dispatch({type: ADD_ERROR, error: err});
      });
  };
}

Chociaż twój reduktor może po prostu zarządzać szeregiem błędów, odpowiednio dodając / usuwając wpisy.

function errors(state = [], action) {
  switch (action.type) {

    case ADD_ERROR:
      return state.concat([action.error]);

    case REMOVE_ERROR:
      return state.filter((error, i) => i !== action.index);

    default:
      return state;
  }
}

Odpowiedź Erika jest poprawna, ale chciałbym dodać, że nie musisz uruchamiać oddzielnych akcji, aby dodać błędy. Alternatywnym podejściem jest posiadanie reduktora, który obsługuje dowolną akcję z errorpolem . To kwestia osobistego wyboru i konwencji.

Na przykład z przykładu Redux,real-world który ma obsługę błędów:

// Updates error message to notify about the failed fetches.
function errorMessage(state = null, action) {
  const { type, error } = action

  if (type === ActionTypes.RESET_ERROR_MESSAGE) {
    return null
  } else if (error) {
    return error
  }

  return state
}

Podejście, które obecnie stosuję w przypadku kilku konkretnych błędów (sprawdzanie poprawności danych wejściowych użytkownika), polega na tym, że moje reduktory podrzędne zgłaszają wyjątek, przechwytują go w moim reduktorze głównym i dołączają go do obiektu akcji. Następnie mam sagę redux, która sprawdza obiekty akcji pod kątem błędu i aktualizuje drzewo stanu danymi o błędach w tym przypadku.

Więc:

function rootReducer(state, action) {
  try {
    // sub-reducer(s)
    state = someOtherReducer(state,action);
  } catch (e) {
    action.error = e;
  }
  return state;
}

// and then in the saga, registered to take every action:
function *errorHandler(action) {
  if (action.error) {
     yield put(errorActionCreator(error));
  }
}

A potem dodanie błędu do drzewa stanu jest zgodne z opisem Erika.

Używam go dość oszczędnie, ale dzięki temu nie muszę powtarzać logiki, która zgodnie z prawem należy do reduktora (dzięki czemu może chronić się przed nieprawidłowym stanem).

napisz niestandardowe oprogramowanie pośredniczące, aby obsłużyć wszystkie błędy związane z interfejsem API. W takim przypadku twój kod będzie bardziej przejrzysty.

   failure/ error actin type ACTION_ERROR

   export default  (state) => (next) => (action) => {

      if(ACTION_ERROR.contains('_ERROR')){

       // fire error action
        store.dispatch(serviceError());

       }
}

To, co robię, to scentralizowanie całej obsługi błędów w efekcie na podstawie poszczególnych efektów

/**
 * central error handling
 */
@Effect({dispatch: false})
httpErrors$: Observable<any> = this.actions$
    .ofType(
        EHitCountsActions.HitCountsError
    ).map(payload => payload)
    .switchMap(error => {
        return of(confirm(`There was an error accessing the server: ${error}`));
    });

Możesz użyć klienta HTTP axios. Posiada już zaimplementowaną funkcję Interceptors. Możesz przechwytywać żądania lub odpowiedzi, zanim zostaną obsłużone do tego czasu lub złapać.

https://github.com/mzabriskie/axios#interceptors

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });