[解決済み] React-Redux: コンポーネントの状態はすべてReduxストアに保持されるべきか？

質問

単純なトグルがあるとします。

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

この結果を得るには、次のようなことをすればよいかもしれません。

index.js

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

コンテナ.js

connect(mapStateToProps)(indexPage)

アクションクリエータ.js

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

reducer.js

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

が、jQueryとクラスとCSSで5秒でできることを、これだけのコードで書いているのですから...。

私が本当に聞きたいことは、ここで何が間違っているのか、ということです。

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

Reduxは主にquot;アプリケーションの状態(")を対象としています。その上に構築されたビューは、その状態を反映したものですが、その状態のコンテナをすべて排他的に使用する必要はありません。

単純に以下の質問をします。この状態はアプリケーションの他の部分にとって重要か? アプリケーションの他の部分は、その状態に基づいて異なる動作をするでしょうか。多くのマイナーなケースでは、そのようなことはないでしょう。例えば、ドロップダウンメニューを考えてみましょう。開いているか閉じているかは、おそらくアプリケーションの他の部分には影響を与えません。だから、店舗と連動させるのはやりすぎでしょう。確かに有効なオプションではありますが、何のメリットもありません。それよりも this.state を使用して、その日を終える方が良いでしょう。

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

一般的に、アプリケーションの状態を可能な限り小さく保つようにします。アプリケーションに すべて をそこに押し込む必要はありません。必要なとき、あるいはそこに何かを入れておくことが非常に意味のあることであるとき、それを行ってください。あるいは、Dev Toolsを使用する際に、あなたの生活をより簡単にする場合です。しかし、その重要性を過度に高めてはいけません。