react reduxでフェッチエラーに対処する最良の方法は何ですか？

クライアント用に1つ、AppToolbar用に1つ、他にいくつかの減速機があります...

ここで、クライアントを削除するフェッチアクションを作成したとしましょう。失敗した場合、Clientsレデューサーに何らかの処理を行うコードがありますが、AppToolbarにグローバルエラーを表示したいとします。

しかし、クライアントとAppToolbarレデューサーは状態の同じ部分を共有せず、レデューサーで新しいアクションを作成できません。

それでは、グローバルエラーを表示するにはどうすればよいですか？ありがとう

更新1：

私はeste devstack を使用していることを忘れています

更新2： 私はエリックの答えを正しいとマークしましたが、私がエステで使用している解決策は、エリックとダンの答えを組み合わせたものに似ていると言う必要があります...コードに最適なものを見つける必要があります。 。

「グローバルエラー」の概念が必要な場合はerrors、addError、removeErrorなどのアクションをリッスンできるレデューサーを作成できます。次に、Redux状態ツリーにフックして、state.errors適切な場所に表示できます。

これに対処する方法はいくつかありますが、一般的な考え方は、グローバルエラー/メッセージは、<Clients />/と完全に分離して独自のレデューサーを使用する価値があるということ<AppToolbar />です。もちろん、これらのコンポーネントのいずれかにアクセスするerrors必要があるerrors場合は、必要に応じて小道具としてそれらに渡すことができます。

更新：コード例

「グローバルエラー」errorsをトップレベルに渡して<App />条件付きでレンダリングした場合（エラーが存在する場合）の例を次に示します。react-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));
  }
}

そして、エラーを状態ツリーに追加するのは、Erikが説明するとおりです。

私はそれをかなり控えめに使用していますが、正当にレデューサーに属しているロジックを複製する必要がないようにしています（そのため、無効な状態から自身を保護することができます）。

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

axios HTTPクライアントを使用できます。インターセプター機能はすでに実装されています。thenまたはcatchによって処理される前に、要求または応答をインターセプトできます。

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