[解決済み] react reduxでfetchエラーが発生した場合の対処方法について教えてください。

質問

Clients用のreducerと、AppToolbar用のreducerと、その他があるのですが。

今、私はクライアントを削除するためにフェッチアクションを作成し、それが失敗した場合、私はいくつかのことを行う必要があり、またAppToolbarにいくつかのグローバルエラーを表示したいClients reducerのコードを持っているとします。

しかし、ClientsとAppToolbarのreducerは状態の同じ部分を共有しないので、reducerで新しいアクションを作成することができません。

では、どのようにグローバルエラーを表示すればよいのでしょうか。ありがとうございます。

UPDATE 1:

言い忘れていましたが、私は エステ デブスタック

UPDATE 2です。 Ericの答えを正しいとしましたが、私がesteで使っている解決策は、EricとDanの答えの組み合わせに近いと言わざるを得ません...。 自分のコードに一番合うものを見つけるしかないですね...。

どのように解決するのですか？

グローバルエラー("global errors")の概念を持たせたい場合は errors を作成し、addError, removeError, etc... アクションをリッスンすることができます。そして、Reduxのステートツリーにフックすることができます。 state.errors でReduxのステートツリーにフックし、適切な場所にそれらを表示することができます。

このアプローチにはいくつかの方法がありますが、一般的な考え方は、グローバルなエラーやメッセージは、それ自身のreducerに値するもので、完全に <Clients /> / <AppToolbar /> . もちろん、これらのコンポーネントのいずれかが errors にアクセスする必要がある場合は errors を小道具として渡すことができます。

更新：コード例

以下は、"global errors"を渡す場合の一例です。 errors をトップレベルの <App /> に変換し、条件付きでレンダリングします (エラーが発生した場合)。使用方法 react-redux の connect を使用して、あなたの <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});
      });
  };
}

reducerは単純にエラーの配列を管理し、適切にエントリーを追加/削除することができます。

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