Qual é a melhor maneira de lidar com um erro de busca no react redux?

Tenho um redutor para clientes, outro para AppToolbar e alguns outros ...

Agora, digamos que eu criei uma ação fetch para excluir o cliente e, se ela falhar, eu tenho um código no redutor de clientes que deve fazer algumas coisas, mas também quero exibir algum erro global no AppToolbar.

Mas os redutores Clients e AppToolbar não compartilham a mesma parte do estado e não consigo criar uma nova ação no redutor.

Então, como devo mostrar o erro global? obrigado

ATUALIZAÇÃO 1:

Esqueci de mencionar que uso este devstack

ATUALIZAÇÃO 2: Eu marquei a resposta de Eric como correta, mas devo dizer que a solução que estou usando neste caso é mais como a combinação da resposta de Eric e Dan ... Você só precisa encontrar o que se encaixa melhor em seu código. .

Se você deseja ter o conceito de "erros globais", pode criar um errorsredutor, que pode escutar as ações addError, removeError, etc .... Então, você pode conectar-se à árvore de estado do Redux em state.errorse exibi-los sempre que apropriado.

Existem várias maneiras de abordar isso, mas a ideia geral é que erros / mensagens globais mereceriam seu próprio redutor para viverem completamente separados de <Clients />/ <AppToolbar />. Claro, se qualquer um desses componentes precisar de acesso, errorsvocê pode transmiti errors-los como um suporte sempre que necessário.

Atualização: Exemplo de Código

Aqui está um exemplo de como seria se você passasse os "erros globais" errorspara o nível superior <App />e os renderizasse condicionalmente (se houver erros). Usando react-redux'sconnect para conectar seu <App />componente a alguns dados.

// 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 no que diz respeito ao criador da ação, ele despacharia ( redux-thunk ) a falha de sucesso de acordo com a resposta

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

Embora seu redutor possa simplesmente gerenciar uma série de erros, adicionando / removendo entradas de forma adequada.

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

A resposta de Erik está correta, mas eu gostaria de acrescentar que você não precisa disparar ações separadas para adicionar erros. Uma abordagem alternativa é ter um redutor que lida com qualquer ação com um errorcampo . É uma questão de escolha pessoal e convenção.

Por exemplo, do exemplo Reduxreal-world que tem tratamento de erros:

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

A abordagem que estou adotando atualmente para alguns erros específicos (validação de entrada do usuário) é fazer com que meus sub-redutores lançem uma exceção, capturem-na em meu redutor raiz e anexem-na ao objeto de ação. Então eu tenho uma saga redux que inspeciona objetos de ação em busca de um erro e atualiza a árvore de estado com dados de erro nesse caso.

Assim:

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

E adicionar o erro à árvore de estado é como Erik descreve.

Eu o uso com moderação, mas evita que eu tenha que duplicar a lógica que pertence legitimamente ao redutor (para que possa se proteger de um estado inválido).

escrever Middleware personalizado para lidar com todos os erros relacionados à API. Nesse caso, seu código ficará mais limpo.

   failure/ error actin type ACTION_ERROR

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

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

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

       }
}

o que faço é centralizar todo o tratamento de erros no efeito por efeito

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

Você pode usar o cliente axios HTTP. Ele já implementou o recurso Interceptors. Você pode interceptar solicitações ou respostas antes que sejam tratadas até então ou capturadas.

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