React Js - Flux 中的状态管理

Posted 2023-02-22

【中文标题】React Js - Flux 中的状态管理

【英文标题】：React Js - State Management in Flux

【发布时间】：2015-06-23 23:26:12

【问题描述】：

我们正在使用 FLUX 架构在 React JS 中开发一个时间跟踪客户端，并且想知道整个应用程序状态应该在单个状态对象中。

这样父组件可以在有变化时获取状态，通过props传递给子组件

或者

每个组件都应该有自己的状态对象，因此当从存储中触发状态更改时，它们可以单独请求其状态和setState。

【参考方案1】：

您应该尝试将状态尽可能地推到层次结构中。因此，您应该倾向于让父组件是有状态的，并将数据传递给无状态（纯）组件。这使得理解应用程序变得更容易，因为大多数状态都在一个地方。没有必要只有一个有状态的组件，但有状态的组件应该尽可能地向上。

但请注意，应用程序状态和 UI 状态之间存在差异。 UI 状态是“此搜索输入框当前包含值 x”或“用户已切换按钮以仅查看今天的数据”之类的内容。并且 UI 状态应该存在于需要和管理该状态的组件中。

应用状态是你应用的数据，需要持久化的数据。你绝对应该努力集中管理它。

【讨论】：

感谢 Anders Ekdahl 的回复。这是有道理的！

【参考方案2】：

同时检查 Flux 比较 repo - https://github.com/voronianski/flux-comparison

它包含有用的 Flux 模式，例如有状态容器和纯组件。