リアクト - Reduxのを：すべてのコンポーネントの状態がReduxのストアに保管してください

Question

は、私はシンプルなトグル持っていると言う：

私はボタンをクリックして、赤と青の間の色成分の変化

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

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秒で達成できた何かのためのコードの大部分です...

私は本当に尋ねていることを推測しています私はここで間違って何をしていますか？

Answer 1

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

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

特定の例では、アプリケーションの他の部分に変更を加えるためにボタンの色を切り替えますか？アプリケーションの大部分をグローバルにオン/オフするトグルであれば、間違いなくストアに属します。ボタンをクリックしたときにボタンの色を切り替えるだけであれば、色の状態をローカルで定義したままにすることができます。ボタンをクリックするアクションは、アクションディスパッチを必要とする他のエフェクトを持っているかもしれませんが、それはどのカラーであるべきかの簡単な質問とは別です。

通常、アプリケーションの状態をできるだけ小さく保ちます。あなたはその内にすべてを押す必要はありません。それをしなければならないときや、何かをそこに置くのが大変なときにやってください。 Dev Toolsを使用しているときにあなたの人生を楽にしてくれますか？しかし、あまりにも重大な負荷をかけすぎないでください。 @ AR7が提供する偉大なリンクを強調するために

Answer 2

、およびそのリンクはしばらく前に移動するので：

利用が世界的にアプリには関係ありません一時的な状態のために反応しません複雑な方法で突然変異を起こす。たとえば、いくつかのUI要素のトグル（フォーム入力状態）。世界的に重要なことを述べたり、複雑な方法で変異させたりするには、Reduxを使用します。たとえば、キャッシュされたユーザー、またはポストドラフト。

時にはRedux状態からReact状態（Reduxの中に何かを格納するのが厄介になるとき）や逆に（多くのコンポーネントがローカルであったいくつかの状態にアクセスする必要があるとき）に移動したいことがあります。

大雑把に言えば、それほど厄介ではありません。

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

Answer 3

Redux FAQ: Organizing State
Reduxの公式ドキュメントウェルのこの部分は、あなたの質問に答えました。

ローカルコンポーネントの状態を使用すると、細かい値はです。開発者は、どのような種類の国家がアプリケーションを構成するのかを判断することがあなたの仕事です。そして、国家のそれぞれが生きるべき場所は です。あなたは あなたのために働く残高を見つけて、それに行きます。

が再来に置かれるべきデータの種類を決定するための親指のいくつかの共通のルール：

• は、このデータについては、アプリケーションケアの他の部分ですか？
• この元のデータに基づいてさらに派生データを作成する必要がありますか？
• 複数のコンポーネントを駆動するために同じデータが使用されていますか？
• この状態を特定の時点（つまり、タイムトラベルのデバッグ）に戻すことができますか？
• データをキャッシュしますか（つまり、データを再要求するのではなく、すでに存在する状態を使用しますか？）