Was ist der beste Weg, um mit einem Abruffehler in React Redux umzugehen?

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. .

Wenn Sie das Konzept "globaler Fehler" haben möchten, können Sie einen errorsReduzierer erstellen , der auf Aktionen von addError, removeError usw. warten kann. Anschließend können Sie sich in Ihren Redux-Statusbaum unter einbinden state.errorsund 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önnen errorsSie sie natürlich errorsü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" errorsan 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.

// 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);

Und was den Aktionsersteller betrifft, würde er gemäß der Antwort einen Erfolgsfehler ( Redux-Thunk ) auslösen

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});
      });
  };
}

Während Ihr Reduzierer einfach eine Reihe von Fehlern verwalten kann, können Sie Einträge entsprechend hinzufügen / entfernen.

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;
  }
}

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 errorFeld verarbeitet . Dies ist eine Frage der persönlichen Wahl und Konvention.

Beispiel aus dem Redux- real-worldBeispiel mit Fehlerbehandlung:

// 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
}

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:

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));
  }
}

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).

Schreiben Sie eine benutzerdefinierte Middleware, um alle API-bezogenen Fehler zu behandeln. In diesem Fall wird Ihr Code sauberer.

   failure/ error actin type ACTION_ERROR

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

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

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

       }
}

Ich zentralisiere die gesamte Fehlerbehandlung im Effekt pro Effekt

/**
 * 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}`));
    });

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

// 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);
  });