reactjs - 商店中真正属于多少状态？

Question

我想知道，有多少状态真正属于商店，而不属于组件？我在一些地方读到过，所有州都应该住在商店里。

这是否包括真正特定于组件的内容，例如输入值（在提交之前）、输入验证、模式是否打开、是否已单击某些内容等？

这里有哪些最佳实践？

Answer 1

显而易见的答案：
尽可能将组件特定状态（输入值、模式打开/关闭、单击的内容、布局、格式）保持在组件状态中。
以及商店内的应用特定状态。其中包括但不限于您与服务器来回发送的内容。

也就是说，这里有很多灰色区域：

• 过滤器是否应用于搜索列表组件状态？还是应用程序状态（如果您保存过滤器以供将来访问同一页面）？
• 访问的链接是处于全局根菜单根组件状态还是应用状态？
• 如果您使用乐观更新，您可能需要在与服务器通信之前和之后将用户输入的内容保存在商店中。

我使用的一些经验法则：

• 如果状态与组件具有相同的生命周期，则状态属于组件（因此，如果状态在组件挂载之前不需要存在，并且在组件卸载后可以忘记）
• 如果在关闭和重新打开应用程序时需要记住状态，最好将其放在商店中（与服务器和/或本地存储进行交换的地方）
• 如果有疑问，请仅从组件中的状态开始：它使状态更加本地化（对组件）并使您的代码更易于管理。在稍后阶段，您始终可以将状态移动到商店。

Answer 2

将所有内容保存在通量商店中可能对某些应用程序有益。

因此，首先，您应该尝试确定您的应用程序是否是这样的。

1. 如果您不确定某个状态是否属于通量存储，那么很可能它不属于。
2. 你会知道什么时候需要flux。当您对此类应用程序架构是否适合您有了一定程度的理解时，您可能也会知道最初问题的答案。

但是当然，有一些特定的指南是很好的，也许只是一个心理指南，告诉你什么时候保持状态在组件内，什么时候不保持。

我会选择这些指南：

• 这种状态纯粹与 UI 相关吗？那么您可能不需要将其保存在商店中。
• 此状态是否在组件之外的其他任何地方共享？如果没有，那就不要把它放在商店里。在组件内部很好。
• 这个状态可以保存在 URL 中吗？如果是这样，那就不要把它放在商店里；把它放在网址中！它可能是输入或当前打开的选项卡的搜索查询。

所有这些可能都有例外，但总的来说，我认为这与通量应用程序的原始想法很好地对应。

---

PS 另外我应该说，有很多谈话说您应该（可能）将所有 UI 保留在不可变的状态树中。这就是向很多人介绍 redux 的方式。我认为你应该明白，虽然这是一个很棒的概念，它允许你保存/重放任何用户交互，但它通常不是不必要的，这不是 Flux 的主要思想。而且 redux 本身是一个很棒的通量工具，它不会强迫您将所有 UI 状态保留在商店中。

Answer 3

特定于组件的视图状态属于该组件。涉及许多组件的应用程序状态属于商店。

Answer 4

这是值得商榷的。例如，redux 提出了一种模式，其中所有状态都属于 store。我个人认为在许多情况下这是不切实际的。当我有任何理由存储商店中按钮的状态时，这是非常罕见的。但有时它可能是有利的。当您的整个应用程序是无状态的时，测试肯定会更容易。