如何使用redux处理组件状态?

时间:2016-08-17 20:17:46

标签: javascript reactjs redux react-redux

我一直在使用vanilla React,现在已经决定仔细看看Redux我正在做的新项目。

起初我得到的印象是所有用户活动应该导致操作,其中一个主要原因是您可以通过回放相应的操作来重建任何应用程序状态。

然而,问题在于,你在商店里放了很多东西,实际上并不像应用程序状态。像“如果我专注于此输入,标签变为绿色”这样的东西似乎不适合在应用程序的应用程序状态中表示,该应用程序可能由数百个组件组成。这些东西对于典型的todo-tutorial来说是完全有道理的,但是在更复杂的场景中很难看出它会如何发展。

然后我再读了一些,发现由创建者Dan Abramov支持的一般意见是,您通常应该将本地组件状态与应用程序状态(存储)结合起来。 “无论什么似乎最不尴尬”似乎是存储国家的经验法则。

一方面,这是完全合理的:真正应用状态,并且与多个组件相关的事物应该在商店中,而仅涉及单个组件的严格表示细节应该使用正常的反应状态来处理。另一方面,这种方法让我感到困惑,因为我在开头写的内容:使用redux不是一个重要的部分,你避免让状态分布在组件中,并且你能够重建状态只是存储动作?

我希望有人可以对这个问题有所了解,因为它一直困扰着我,而且我认为在尝试用redux构建复杂的东西之前我应该​​得到一个坚实的意见。

1 个答案:

答案 0 :(得分:3)

你放在哪个州完全取决于你。有时将所有内容都放在Redux中是有意义的,有时将内容保存在组件中可能是有意义的。我最近看到了一些很好的经验法则:

  • 应用程序的其他部分是否关心该数据?
  • 您是否需要能够从该数据中获取更多数据?
  • 是否使用相同的数据来驱动多个组件/功能?
  • 是否有价值,能够将状态恢复到给定的时间点(即:时间旅行/调试)?
  • 您是否要缓存数据,即:如果已经存在而不是再次请求数据,请将其从状态重新加载?

(归功于https://www.reddit.com/r/reactjs/comments/4w04to/when_using_redux_should_all_asynchronous_actions/d63u4o8该列表。)

另请参阅有关此主题的Redux常见问题解答:http://redux.js.org/docs/FAQ.html#organizing-state-only-redux-state