React-Redux：应该将所有组件状态保存在Redux Store中

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每天使用并调用它。

在您的特定示例中，切换按钮的颜色是否会对应用程序的其他部分产生影响？如果它是应用程序主要部分的某种全局开/关切换，则它肯定属于商店。但是，如果您只是在单击按钮时切换按钮颜色，则可以保留本地定义的颜色状态。单击按钮的动作可能还具有其他需要动作分派的效果，但这与应该使用什么颜色的简单问题是分开的。

通常，请尝试使应用程序状态尽可能小。您不必将 所有东西
都推到那里。在需要时执行此操作，或者将某些内容保留在其中很有意义。或者，如果使用开发工具可以使您的生活更轻松。但是不要过多地强调它的重要性。