web-dev-qa-db-ja.com

Redux:アクションとリデューサーを同じファイルに入れないのはなぜですか?

私はReduxを使用してアプリを作成していますが、アクションとレデューサーを別々のファイルに配置するのが最適な理由について頭を悩ませています。少なくとも、それは私がすべての例から得ている印象です。

各アクション、またはaction creatorは、(switchステートメント内の)レデューサーによって呼び出される単一の関数にマップされているように見えます。これらを一緒に同じファイルに保存するのは論理的ではないでしょうか?また、ファイル間でエクスポート/インポートする必要がないため、アクションタイプとスイッチケースに同じ定数を簡単に使用できます。

24
pjivers

Reduxの作成者Dan Abramovから:

多くのレデューサーが1つのアクションを処理できます。 1つのレデューサーで多くのアクションを処理できます。それらをまとめると、FluxとReduxのアプリケーションのスケーリング方法の多くの利点が失われます。これはコードの膨張と不必要な結合につながります。異なる場所からの同じアクションに対応する柔軟性が失われ、アクション作成者は「セッター」のように振る舞い、特定の状態シェイプに結合され、コンポーネントもそれに結合します。

Redux docs から:

特定の状態スライスへの更新をそれぞれ担当する独立した小さなレデューサー関数を作成することをお勧めします。このパターンを「レデューサー構成」と呼びます。特定のアクションは、すべて、一部、またはまったく処理できません。これにより、1つのアクションが状態ツリーのさまざまな部分に影響を与える可能性があるため、コンポーネントが実際のデータ変更から切り離され、コンポーネントがこれを認識する必要がありません。

詳細は Twitterでのこの会話 および githubでのこの問題 を参照してください。

30
Shane Cavaliere

アクションとリデューサーを別々のファイルに保存すると、コードをモジュール化するのに役立ちます。

バグを見つけたり、コードを拡張したり、一般的には可能な限り小さな部分に取り組んだりするのが簡単になります。

例:

APIエラーメッセージをReduxストアに保存すると役立つ場合があります。

レデューサーの1つで受信エラーを使用してストアを更新するのを忘れた場合、複数のファイルを見つけるのは難しい場合があります。

同じファイル内の複数のReducerを表示している場合、それらの1つにerror: action.payload行がないことが簡単にわかります。

0
tjr226