React-Redux：すべてのコンポーネントの状態をReduxストアに保持する必要があります

Question 1

簡単な切り替えがあるとしましょう：

ボタンをクリックすると、色コンポーネントが赤と青の間で変化します

私はこのようなことをすることによってこの結果を達成するかもしれません。

index.js

Button: onClick={()=>{dispatch(changeColor())}}
Color: this.props.color ? blue : red

container.js

connect(mapStateToProps)(indexPage)

action_creator.js

function changeColor(){
 return {type: 'CHANGE_COLOR'}
}

reducer.js

switch(){
case 'CHANGE_COLOR':
return {color: true}

しかし、これは、jQuery、いくつかのクラス、および一部のcssを使用して5秒で達成できた何かのために作成する多くのコードの地獄です...

だから私が本当に求めていることは、ここで何が間違っているのでしょうか？

Question 2

Reduxは主に「アプリケーションの状態」を対象としています。つまり、アプリケーションロジックに関連するすべてのものです。その上に構築されたビューはその状態を反映したものですが、その状態のコンテナーをすべてのために排他的に使用する必要はありません。

これらの質問をするだけです：この状態はアプリケーションの残りの部分にとって重要ですか？アプリケーションの他の部分は、その状態に基づいて異なる動作をしますか？多くのマイナーなケースでは、そうではありません。ドロップダウンメニューを使用します。開いているか閉じているかは、アプリの他の部分には影響しません。だから、あなたの店にそれを配線することはおそらくやり過ぎです。これは確かに有効なオプションですが、実際に利益をもたらすわけではありません。あなたはthis.stateそれを1日使ってそれを呼ぶほうがいいです。

あなたの特定の例では、アプリケーションの他の部分に違いをもたらすために、そのボタンの色が切り替えられていますか？それがアプリケーションの主要部分のある種のグローバルなオン/オフの切り替えである場合、それは間違いなくストアに属しています。ただし、ボタンをクリックしたときにボタンの色を切り替えるだけの場合は、色の状態をローカルで定義したままにすることができます。ボタンをクリックするアクションには、アクションディスパッチを必要とする他の効果が含まれる場合がありますが、それは、どの色にするかという単純な問題とは別のものです。

一般に、アプリケーションの状態をできるだけ小さく保つようにしてください。そこにすべてを押し込む必要はありません。あなたがしなければならないとき、または何かをそこに保持することが非常に理にかなっているときにそれをしてください。または、Dev Toolsを使用するときに生活が楽になる場合。しかし、その重要性に過度の負担をかけすぎないでください。

Question 3

Redux FAQ：組織の状態Redux
公式ドキュメントのこの部分は、あなたの質問によく答えました。

ローカルコンポーネントの状態の使用は問題ありません。開発者は、アプリケーションを構成する状態の種類と、各状態をどこに置くかを決定するのがあなたの仕事です。あなたのために働くバランスを見つけて、それで行きます。

Reduxに入れるデータの種類を決定するための一般的な経験則：

アプリケーションの他の部分はこのデータを気にしますか？

この元のデータに基づいて、さらに派生データを作成できるようにする必要がありますか？

同じデータが複数のコンポーネントの駆動に使用されていますか？

この状態を特定の時点に戻すことができる（つまり、タイムトラベルデバッグ）ことに価値はありますか？

データをキャッシュしますか（つまり、データを再要求するのではなく、すでに存在する場合はその状態を使用します）？

Question 4

@ AR7によって提供される素晴らしいリンクを強調する目的で、そのリンクが少し前に移動したため：

Reactは、アプリ全体に関係なく、複雑な方法で変化しない一時的な状態に使用します。たとえば、一部のUI要素のトグルはフォーム入力状態です。Reduxは、グローバルに重要な状態または複雑な方法で変化する状態に使用します。たとえば、キャッシュされたユーザーや投稿の下書き。

Redux状態からReact状態（何かをReduxに格納すると厄介になる）に、またはその逆（他のコンポーネントがローカルであった状態にアクセスする必要がある場合）に移動したい場合があります。

経験則としては、扱いにくいものは何でもしてください。

ダンアブラモフ：https : //github.com/reactjs/redux/issues/1287#issuecomment-175351978

Question 5

はい、すべてのコンポーネントの状態をReduxに格納するように努力する価値があります。そうすることで、タイムトラベルデバッグや再現可能なバグレポートなど、Reduxの多くの機能を利用できます。そうしないと、それらの機能が完全に使用できなくなる可能性があります。

コンポーネントの状態の変更をReduxに保存しない場合、その変更はReduxの変更のスタックから完全に失われ、アプリケーションUIはストアと同期しなくなります。これが重要でない場合は、なぜReduxを使用するのかを自問してみてください。それがなければ、アプリケーションはそれほど複雑ではなくなります。

パフォーマンス上の理由から、this.setState()多くのアクションを繰り返しディスパッチするものにはフォールバックしたい場合があります。たとえば、ユーザーがキーを入力するたびにReduxに入力フィールドの状態を保存すると、パフォーマンスが低下する可能性があります。これはトランザクションのように扱うことで解決できます。ユーザーアクションが「コミット」されたら、最終状態をReduxに保存します。

元の投稿では、Reduxの方法が「大量のコードを書く地獄」であることに言及しています。はい。ただし、ローカルコンポーネントの状態などの一般的なパターンには抽象化を使用できます。