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

说我有一个简单的切换:

当我点击button,颜色组件在红色和蓝色之间变化

我可以通过做这样的事情来达到这个目的。

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} 

但这是一个很多的代码写的地狱,我可以在5秒内用jQuery,一些类和一些CSS来实现…

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

Redux主要用于“应用程序状态”。 也就是说,任何与你的应用逻辑有关的东西。 构build在它上面的视图是该状态的反映,但不一定专门使用该状态容器来处理它所做的所有事情。

简单地问这些问题:这个状态对于其他应用程序是否重要? 基于该状态,应用程序的其他部分会有不同的performance吗? 在很多次要情况下,情况并非如此。 采取下拉菜单:它打开或closures的事实可能不会影响应用程序的其他部分。 所以,把它连接到你的商店可能是矫枉过正的。 这当然是一个有效的select,但是并不真正为你带来任何好处。 你最好使用this.state并调用它一天。

在你的特定的例子中,button被切换的颜色是否在应用程序的其他部分有所不同? 如果某种全局开/关切换为应用程序的主要部分,那肯定属于商店。 但是,如果您只是点击button时切换button的颜色,则可以保持本地定义的颜色状态。 点击button的动作可能会有其他的效果,需要一个行动派遣,但这是与它应该是什么颜色的简单问题分开。

一般来说,尽量保持应用程序状态尽可能小。 你不需要把所有东西都放在那里。 当你必须做,或者在那里保持某种东西是很有道理的。 或者,如果使用开发工具使您的生活更轻松。 但是不要过分重视它的重要性。

为了突出显示由@ AR7提供的伟大链接,并且因为该链接移动了一段时间:

将React用于与全局应用无关的短暂状态,不会以复杂的方式进行变异。 例如,在某个UI元素中切换,表单input状态。 使用Redux来处理全局性问题,或者以复杂的方式进行变异。 例如,caching的用户,或一个后期草案。

有时你会想从Redux状态转换到React状态(当在Redux中存储某些东西时会变得笨拙)或者反过来(当更多的组件需要访问某个曾经是本地的状态时)。

经验法则是:做任何不那么尴尬的事情。

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

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

使用本地组件状态是好的 。 作为一名开发人员,您的工作是确定组成您的应用程序的状态以及每个州应该在哪里生活。 find一个适合你的平衡点,并与之配合。

确定应该将什么types的数据放入Redux的一些常见经验法则是:

  • 应用程序的其他部分是否关心这些数据?
  • 你需要能够根据这个原始数据创build更多的派生数据吗?
  • 是否使用相同的数据来驱动多个组件?
  • 能否将这个状态恢复到某个给定的时间点(例如,时间旅行debugging)对你有价值吗?
  • 你想caching数据(即,如果它已经存在,而不是重新请求它,使用什么状态)?