在 Flux / Redux 中保存啥和不保存啥？

Posted 2023-02-22

【中文标题】在 Flux / Redux 中保存啥和不保存啥？

【英文标题】：What to save & what not to save in Flux / Redux?在 Flux / Redux 中保存什么和不保存什么？

【发布时间】：2017-10-11 19:44:09

【问题描述】：

所以我相信使用 Redux 有不同的方式，我不确定这是否是一个好主意，或者我现在所做的是否完全错误。假设我有一个管理学校（班级和学生等）的软件。我现在使用 Redux 的方式如下：

1 我首先要存储应用程序状态：选择了哪个瞳孔，哪个视图当前处于活动状态，选中了哪些复选框。我还将为preferences 提供一个单独的reducer - 即用户在他或她的偏好设置中选择的内容。例如，软件的语言。

在我看来，这与存储应用程序状态的想法不同，因为与应用程序状态有关的许多事情不是首选项，而只是当前选择的内容。这种划分是否有意义，或者您会反对这种划分吗？

2 然后，此外，我还使用 Redux 来保存数据，所以我有点将它用作数据库。就我而言，我会将 json 完全 加载到我的商店中，然后继续使用它。因此，我不仅会在我的 Redux 存储中拥有活动的学生（这将是正确的应用程序状态），而且（在不同的减速器中）每个学生，然后根据需要，为其他减速器提供活动的减速器等。

这是不好的做法吗？我是否应该尝试将其完全外包到“适当的”数据库中？

【参考方案1】：

有一篇名为The 5 Types of React Application State 的好文章尝试对应用程序中不同类型的数据进行分类。您决定将哪些内容放入 Redux 由您决定。引用Redux FAQ on what to put into Redux：

确定应将哪种数据放入 Redux 的一些常见经验法则：

应用程序的其他部分是否关心这些数据？ 您是否需要能够根据这些原始数据创建进一步的派生数据？ 是否使用相同的数据来驱动多个组件？ 能够将此状态恢复到给定时间点（即时间旅行调试）对您有什么价值吗？ 您是否要缓存数据（即，如果它已经存在，则使用状态中的内容，而不是重新请求它）？

因此，在 Redux 中存储获取的数据和本地应用程序状态是完全没问题的。

当您遵循normalizing state in your Redux store 的建议做法时，Redux 本身就有点像客户端数据库。我的"Practical Redux" tutorial series 展示了跟踪列表中当前选择的项目以及实现对当前选择的项目进行编辑的示例。

【参考方案2】：

我可以给你的一个实用技巧是避免将“当前学生”数据放入 redux 存储中。取而代之的是，只需在商店中有一组学生，按 id 进行索引，并让您的反应组件根据当前 url 从 redux 商店中选择数据（例如，在页面 /pupils/345 上，让您的组件使用用户 345 的数据）。

这并不意味着您需要在 redux 中拥有所有学生的数据。 redux 状态是一种数据库，但它只代表您的客户端知道的信息。例如。当用户到达页面 /pupils/345 时，如果 redux 中没有瞳孔 345，则触发从服务器获取该数据的操作。

对于当前的 UI 状态，重点是将数据保存在一个位置，即“单一事实来源”。该位置可以是：

当前 url（带有 react-router）：非常适合“哪个视图处于活动状态” Redux 存储：当它影响多个单独的组件时很好，例如当前语言 单个有状态组件的状态（如果状态是一个组件的本地状态，并且您不需要 redux 的额外功能和复杂性，这是一个很好的解决方案）