有多少状态真正属于商店?

How much state does really belong in the stores?

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

这是否真的包括特定于组件的内容,例如输入值(提交前)、输入验证、模式是否打开、是否已单击某些内容等?

此处的最佳做法是什么?

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

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

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

也就是说,这里有很多灰色区域:

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

我使用的一些经验法则:

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

一切保存在通量存储中可能一些应用程序有益。

所以首先,您应该尝试确定您的应用是否是这样的。

  1. 如果您不确定某个状态是否属于通量存储,那么它很可能不属于。
  2. You'll know when you need flux。当您对此类应用程序体系结构是否适合您有这样的理解时,您可能也会知道您最初问题的答案。

当然,最好有某种特定的指南,也许只是一个心理指南,告诉您何时在组件中保持状态,何时不保持状态。

我会遵循这些指南:

  • Is this state purely UI-related? Then you probably don't need to keep it in the store.
  • Is this state shared anywhere else outside the component? If not, then don't put it in the store. It's fine inside the component.
  • Can this state be persisted in the URL? If so, then don't put it in the store; put it in the url! It might be a search query of an input or a currently opened tab.

所有这些可能都有例外,但总的来说,我认为这与 flux 应用程序的原始想法非常吻合。


P.S。另外我要说的是,有很多人说你应该(可能)将你所有的 UI 保存在一个不可变的状态树中。这就是 redux 被介绍给很多人的方式。我想你应该明白,虽然这是一个很好的概念,它允许你 save/replay 任何用户交互,但它通常 不必要 而且这不是主要思想通量是关于。 redux 本身是一个很好的 flux 工具,不会 强迫你在商店中保留所有 UI 状态。