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每天使用和调用它.

在您的特定示例中,该按钮的颜色是否会切换为在应用程序的其他部分中产生任何差异？如果它是应用程序主要部分的某种全局开/关切换,它肯定属于商店.但是,如果您只是在单击按钮时切换按钮颜色,则可以将颜色状态保留在本地定义.单击按钮的操作可能具有需要操作调度的其他效果,但这与应该是什么颜色的简单问题是分开的.

通常,尽量保持应用程序状态尽可能小.你不必把所有东西都塞进去.在必要的时候这样做,或者在那里保留一些东西很有意义.或者,如果它在使用Dev Tools时让您的生活更轻松.但是不要过分重视它的重要性.

Answer 2

Redux FAQ:组织状态
redux官方文档的这一部分很好地回答了你的问题.

使用本地组件状态很好.作为开发人员,您的工作是确定应用程序的状态,以及每个州应该居住的位置.找到适合您的天平,并配合它.

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

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

Answer 3

为了突出显示@ AR7提供的出色链接，并且因为该链接向后移动了一段时间，所以：

将React用于短暂状态，此状态对应用程序全局无关，并且不会以复杂的方式进行更改。例如，在某些UI元素中切换，即表单输入状态。将Redux用于全局重要的状态或以复杂方式突变的状态。例如，缓存的用户或后期草稿。

有时，您可能希望从Redux状态转换为React状态（当在Redux中存储某些内容变得笨拙时），或者反过来（当更多组件需要访问曾经是本地的某些状态时）。

经验法则是：做些不太尴尬的事情。

丹·阿布拉莫夫（Dan Abramov）：https : //github.com/reactjs/redux/issues/1287#issuecomment-175351978

Answer 4

这就是 Redux 的问题，开发人员过度设计状态设计，总是将相当简单的应用程序变成复杂的结构。

\n

Redux 对我来说是一个 React 架构，在实施之前应该好好规划和设计。

\n

https://kentcdodds.com/blog/application-state-management-with-react/ \n\xe2\x80\x9d redux 如此成功的原因之一是，react-redux 解决了 Prop-Drilling 问题。事实上，只需将组件传递到一些神奇的连接函数中，您就可以在树的不同部分之间共享数据，这一点真是太棒了。它使用减速器/动作创建器/等等。也很棒，但我确信 redux 的普遍存在是因为它解决了开发人员的 Prop-Drilling 痛点。

\n

这就是我只在一个项目上使用 redux 的原因：我一直看到开发人员将所有状态都放入 redux 中。不仅是全局应用程序状态，还有本地状态。这会导致很多问题，其中最重要的是，当您维护任何状态交互时，它涉及与化简器、操作创建者/类型以及调度调用进行交互，这最终导致必须打开许多文件和跟踪你头脑中的代码，找出发生了什么以及它对代码库的其余部分有什么影响。\xe2\x80\x9c\xe2\x80\x9d

\n