如何用redux处理组件状态

How to deal with component state with redux?

本文关键字：组件 状态 处理 redux 何用      更新时间：2023-09-26

我已经使用vanilla React有一段时间了，现在决定在我正在做的一个新项目中仔细研究一下Redux。

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

然而，这样做的问题是，您在商店中放置了许多实际上感觉不像应用程序状态的东西。像"如果我关注这个输入，标签就变成绿色"这样的内容似乎不适合在可能由数百个组件组成的应用程序的应用程序状态中表示。这些东西在典型的todo-tutorial中是完全有意义的，但在更复杂的场景中很难看到它的结果。

然后我又读了一些，发现由创建者Dan Abramov支持的普遍观点是，通常应该将本地组件状态与应用程序状态(store)结合起来。"看起来最不尴尬的"似乎是存储状态的经验法则。

一方面，这是完全有意义的:与多个组件相关的真正应用程序状态的东西应该在存储中，而只涉及单个组件的严格表示细节应该使用正常的反应状态来处理。另一方面，由于我在开头所写的内容，这种方法让我有点困惑:redux的主要目的不就是避免在组件之间分布状态，并且能够通过仅存储操作来重新创建状态吗?

我希望有人能阐明这个问题，因为它一直困扰着我，我认为在尝试用redux构建复杂的东西之前，我应该得到一个可靠的意见。

你把什么状态放在哪里完全取决于你自己。有时将所有内容放在Redux中可能有意义，有时将内容保留在组件中可能有意义。我最近看到了一些很好的经验法则:

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

(来源:https://www.reddit.com/r/reactjs/comments/4w04to/when_using_redux_should_all_asynchronous_actions/d63u4o8)

请参阅Redux FAQ: http://redux.js.org/docs/FAQ.html#organizing-state-only-redux-state .

相关文章：