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

Question

假设我有一个简单的切换：

单击按钮时，Color 组件在红色和蓝色之间变化

我可能会通过做这样的事情来实现这个结果。

索引.js

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

容器.js

 connect(mapStateToProps)(indexPage)

action_creator.js

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

reducer.js

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

但要编写一些我可以在 5 秒内使用 jQuery、一些类和一些 css 实现的代码，实在是太麻烦了……

所以我想我真正要问的是，我在这里做错了什么？

原文由 l2silver 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Redux 主要用于“应用程序状态”。也就是说，与您的应用程序逻辑相关的任何内容。建立在它之上的视图是该状态的反映，但不必为它所做的一切专门使用该状态容器。

简单地问这些问题：这个状态对应用程序的其余部分重要吗？应用程序的其他部分是否会根据该状态表现不同？在许多轻微的情况下，情况并非如此。以下拉菜单为例：它打开或关闭的事实可能不会对应用程序的其他部分产生影响。因此，将其连接到您的商店可能有点矫枉过正。这当然是一个有效的选择，但并不能真正为您带来任何好处。您最好使用 this.state 并收工。

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

通常，尽量保持应用程序状态尽可能小。你不必把 所有东西 都塞进去。必要时做，或者把东西放在那里很有意义。或者在使用开发工具时是否让您的生活更轻松。但不要过分强调它的重要性。

原文由 Tim Dorr 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Redux FAQ：组织状态

redux 官方文档的这一部分很好地回答了你的问题。

使用本地组件状态很好。作为开发人员，您的工作是确定构成您的应用程序的状态类型，以及每种状态应该存在的位置。找到适合您的平衡点，然后顺其自然。

确定应将哪种数据放入 Redux 的一些常见经验法则：

• 应用程序的其他部分是否关心此数据？
• 您是否需要能够基于此原始数据创建进一步的派生数据？
• 是否使用相同的数据来驱动多个组件？
• 能够将此状态恢复到给定时间点（即时间旅行调试）对您有价值吗？
• 您是否要缓存数据（即，如果数据已经存在，则使用当前状态而不是重新请求它）？

原文由 chuck911 发布，翻译遵循 CC BY-SA 4.0 许可协议