Как лучше всего справиться с ошибкой выборки в React redux?

У меня есть один редуктор для клиентов, другой для AppToolbar и некоторые другие ...

Теперь допустим, что я создал действие выборки для удаления клиента, и если это не удается, у меня есть код в редукторе клиентов, который должен кое-что делать, но также я хочу отобразить некоторую глобальную ошибку в AppToolbar.

Но редукторы Clients и AppToolbar не используют одну и ту же часть состояния, и я не могу создать новое действие в редукторе.

Так как же мне показать глобальную ошибку? Спасибо

ОБНОВЛЕНИЕ 1:

Я забыл упомянуть, что использую este devstack

ОБНОВЛЕНИЕ 2: Я отметил ответ Эрика как правильный, но я должен сказать, что решение, которое я использую, больше похоже на комбинацию ответов Эрика и Дэна ... Вам просто нужно найти то, что вам больше всего подходит в вашем коде .. .

Если вы хотите иметь концепцию «глобальных ошибок», вы можете создать errorsредуктор, который может прослушивать действия addError, removeError и т. Д. Затем вы можете подключиться к своему дереву состояний Redux state.errorsи отображать их там, где это необходимо.

Есть несколько способов подойти к этому, но общая идея состоит в том, что глобальные ошибки / сообщения заслуживают того, чтобы их собственный редуктор существовал полностью отдельно от <Clients />/ <AppToolbar />. Конечно, если любому из этих компонентов нужен доступ, errorsвы можете передать errorsего в качестве опоры везде, где это необходимо.

Обновление: пример кода

Вот один пример того, как это могло бы выглядеть, если бы вы передали "глобальные ошибки" errorsна свой верхний уровень <App />и условно отрендерили их (если есть ошибки). Использование response-reduxconnect для подключения вашего <App />компонента к некоторым данным.

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

И что касается создателя действия, он отправит ( redux-thunk ) успешную неудачу в соответствии с ответом

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

Хотя ваш редуктор может просто управлять массивом ошибок, соответствующим образом добавляя / удаляя записи.

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

Ответ Эрика правильный, но я хотел бы добавить, что вам не нужно запускать отдельные действия для добавления ошибок. Альтернативный подход - иметь редуктор, который обрабатывает любое действие с errorполем . Это вопрос личного выбора и условности.

Например, из примера Redux, вreal-world котором есть обработка ошибок:

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

Подход, который я сейчас использую для нескольких конкретных ошибок (проверка пользовательского ввода), заключается в том, чтобы мои суб-редукторы генерировали исключение, перехватывали его в моем корневом редукторе и прикрепляли к объекту действия. Затем у меня есть redux-saga, которая проверяет объекты действий на наличие ошибок и в этом случае обновляет дерево состояний с данными об ошибках.

Так:

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

А затем добавление ошибки в дерево состояний, как описывает Эрик.

Я использую его довольно экономно, но он избавляет меня от необходимости дублировать логику, которая законно принадлежит редуктору (чтобы он мог защитить себя от недопустимого состояния).

напишите собственное промежуточное ПО для обработки всех ошибок, связанных с api. В этом случае ваш код будет чище.

   failure/ error actin type ACTION_ERROR

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

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

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

       }
}

что я делаю, так это централизую всю обработку ошибок в эффекте для каждого эффекта

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

Вы можете использовать HTTP-клиент axios. Он уже реализовал функцию перехватчиков. Вы можете перехватывать запросы или ответы до того, как они будут обработаны к тому времени или пойманы.

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