Flux + React:何时在商店中保存可视化组件的状态
Flux + React: when to keep state of visual components at store
有时并不明显:我应该在哪里保存 React 视图的状态,即活动选项卡、选定选项、切换器值、输入验证标志?
其实有两种选择:
- 执行一个操作并将数据保存在存储中
- 将该数据保留为视图的状态
他们哪个更好?存储是否仅用于来自服务器的数据?
我的考虑:
- 将数据保存在存储中是不好的,因为这会导致一系列操作。示例:您需要在选项卡选择上下载数据 - 因此您触发了一个操作
NEW_TAB_SELECTED
并从处理它的商店触发了一个新操作 DOWLOAD_TAB_DATA
.
- 保持数据在视图中可以避免第一个操作 (
NEW_TAB_SELECTED
) 并避免操作链。但是如果我想离开这个视图,如何保持选中的选项卡?
应该保留在组件状态中的东西是只影响该组件的东西。
因此,例如,如果您有一个打开后显示更多内容的组件,那么 isOpen
标志可以保持在状态,因为它在组件内部。
如果信息不是组件的一部分(例如消息的文本和消息是否已被阅读),则应将其保存在商店中并根据需要在应用程序中传播。
更改组件的状态会导致其重绘,因此请尽量将状态保持为其状态的最小可能表示,并且仅将这些属性存储在 this.state
.
中
因此,根据我从您的问题中收集到的信息,我建议保持活动选项卡、选定选项、切换器值以及输入是否在 this.state
中得到验证。它们都是组件的属性,但不影响任何其他组件。我会将填充视图的数据保留在商店中。我会在 this.state
.
中保留指示视图状态的标志
希望对您有所帮助。
有时并不明显:我应该在哪里保存 React 视图的状态,即活动选项卡、选定选项、切换器值、输入验证标志?
其实有两种选择:
- 执行一个操作并将数据保存在存储中
- 将该数据保留为视图的状态
他们哪个更好?存储是否仅用于来自服务器的数据?
我的考虑:
- 将数据保存在存储中是不好的,因为这会导致一系列操作。示例:您需要在选项卡选择上下载数据 - 因此您触发了一个操作
NEW_TAB_SELECTED
并从处理它的商店触发了一个新操作DOWLOAD_TAB_DATA
. - 保持数据在视图中可以避免第一个操作 (
NEW_TAB_SELECTED
) 并避免操作链。但是如果我想离开这个视图,如何保持选中的选项卡?
应该保留在组件状态中的东西是只影响该组件的东西。
因此,例如,如果您有一个打开后显示更多内容的组件,那么 isOpen
标志可以保持在状态,因为它在组件内部。
如果信息不是组件的一部分(例如消息的文本和消息是否已被阅读),则应将其保存在商店中并根据需要在应用程序中传播。
更改组件的状态会导致其重绘,因此请尽量将状态保持为其状态的最小可能表示,并且仅将这些属性存储在 this.state
.
因此,根据我从您的问题中收集到的信息,我建议保持活动选项卡、选定选项、切换器值以及输入是否在 this.state
中得到验证。它们都是组件的属性,但不影响任何其他组件。我会将填充视图的数据保留在商店中。我会在 this.state
.
希望对您有所帮助。