Flux+React:何时在商店中保持视觉组件的状态

Flux + React: when to keep state of visual components at store

本文关键字：视觉 组件 状态 何时 Flux+React      更新时间：2023-09-26

有时并不明显：我应该在哪里保持React视图的状态，即活动选项卡、选定选项、切换符值，输入验证标志

实际上有两种选择：

  1. 执行操作并将数据保存在存储中
  2. 将该数据保留为视图的状态

他们中哪一个更好？存储是否仅用于来自服务器的数据

我的注意事项：

  1. 保存这些数据是不好的，因为这会导致一连串的行动。示例：您需要下载选项卡选择的数据，因此您触发一个操作NEW_TAB_SELECTED，并从处理该操作的存储中触发一个新的操作DOWLOAD_TAB_DATA
  2. 保持数据在视图中可以避免第一个动作（NEW_TAB_SELECTED）并避免动作链。但是，如果我想离开这个视图，如何保留选中的选项卡

应该保持组件状态的东西是只影响该组件的东西。

因此，例如，如果您有一个打开以显示更多内容的组件，那么isOpen标志可以保持在状态，因为它是组件内部的。

如果信息不是组件的一部分（例如消息的文本以及消息是否已被阅读），则应将其保存在商店中，并根据需要在应用程序中传播。

更改组件的状态将导致其重新绘制，因此请尽量将状态保持为其状态的尽可能小的表示形式，并仅将这些属性存储在this.state中。

因此，根据我从您的问题中收集到的信息，我建议保持活动选项卡、选定选项、切换符值以及输入是否在this.state中验证。它们都是组件的属性，但不会影响任何其他组件。我会把填充视图的数据保存在商店里。我会在this.state中保留指示视图状态的标志。

希望能有所帮助。

相关文章：