Qual è il modo migliore per gestire un errore di recupero in React Redux?

Ho un riduttore per i client, un altro per AppToolbar e alcuni altri ...

Ora diciamo che ho creato un'azione di recupero per eliminare il client, e se fallisce ho del codice nel riduttore Clients che dovrebbe fare alcune cose, ma voglio anche visualizzare alcuni errori globali in AppToolbar.

Ma i riduttori Client e AppToolbar non condividono la stessa parte dello stato e non posso creare una nuova azione nel riduttore.

Allora come suppongo di mostrare l'errore globale? Grazie

AGGIORNAMENTO 1:

Dimentico di dire che uso este devstack

AGGIORNAMENTO 2: Ho contrassegnato la risposta di Eric come corretta, ma devo dire che la soluzione che sto usando in este è più simile a una combinazione della risposta di Eric e Dan ... Devi solo trovare ciò che ti si adatta meglio nel tuo codice .. .

Se vuoi avere il concetto di "errori globali", puoi creare un errorsriduttore, che può ascoltare le azioni addError, removeError, ecc. Quindi, puoi collegarti al tuo albero di stato Redux su state.errorse visualizzarli dove appropriato.

Ci sono molti modi in cui potresti avvicinarti a questo, ma l'idea generale è che gli errori / messaggi globali meriterebbero il loro riduttore per vivere completamente separati da <Clients />/ <AppToolbar />. Ovviamente, se uno di questi componenti necessita di accesso, errorspuoi trasmetterlo errorsa loro come supporto ovunque sia necessario.

Aggiornamento: esempio di codice

Ecco un esempio di come potrebbe apparire se dovessi passare gli "errori globali" errorsal tuo livello superiore <App />e renderlo condizionatamente (se sono presenti errori). Uso di react-reduxconnect per collegare il tuo <App />componente ad alcuni dati.

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

E per quanto riguarda il creatore dell'azione, invierà un errore di successo ( redux-thunk ) in base alla risposta

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

Mentre il tuo riduttore potrebbe semplicemente gestire una serie di errori, aggiungendo / rimuovendo le voci in modo appropriato.

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

La risposta di Erik è corretta ma vorrei aggiungere che non è necessario attivare azioni separate per l'aggiunta di errori. Un approccio alternativo consiste nell'avere un riduttore che gestisca qualsiasi azione con un errorcampo . Questa è una questione di scelta personale e convenzione.

Ad esempio, dalla Redux real-worldesempio che ha la gestione degli errori:

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

L'approccio che sto attualmente adottando per alcuni errori specifici (convalida dell'input dell'utente) è di fare in modo che i miei sub-riduttori generino un'eccezione, catturandola nel mio riduttore di root e collegandola all'oggetto azione. Quindi ho una redux-saga che ispeziona gli oggetti azione per un errore e aggiorna l'albero di stato con i dati di errore in quel caso.

Così:

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

Quindi aggiungere l'errore all'albero degli stati è come descritto da Erik.

Lo uso con parsimonia, ma mi evita di dover duplicare la logica che appartiene legittimamente al riduttore (quindi può proteggersi da uno stato non valido).

scrivere middleware personalizzato per gestire tutti gli errori relativi alle API. In questo caso il tuo codice sarà più pulito.

   failure/ error actin type ACTION_ERROR

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

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

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

       }
}

quello che faccio è centralizzare tutta la gestione degli errori nell'effetto in base all'effetto

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

Puoi usare il client HTTP axios. Ha già implementato la funzione Interceptors. È possibile intercettare le richieste o le risposte prima che vengano gestite in quel momento o catturare.

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