数据应该放在 redux 状态树中吗？

Posted 2023-02-22

【中文标题】数据应该放在 redux 状态树中吗？

【英文标题】：Should data go in a redux state tree?

【发布时间】：2016-04-30 09:55:53

【问题描述】：

我有点不知道应该在 Redux 的状态树中保留什么。

我看到关于在状态树中存储什么的两个相互矛盾的陈述。

React doc 告诉我们只有

用户输入

应该存储在状态树中。

产品的原始列表作为道具传入，所以那不是状态。搜索文本和复选框似乎是状态，因为它们会随着时间而变化，并且无法从任何东西中计算出来。最后，过滤的产品列表不是状态，因为它可以通过将原始产品列表与搜索文本和复选框的值相结合来计算。

Redux doc 告诉我们，我们经常应该将 UI 状态

和数据

存储在单个状态树中：

对于我们的待办事项应用，我们想要存储两个不同的东西：

当前选择的可见性过滤器； 待办事项的实际列表。

您经常会发现需要在状态树中存储一些数据以及一些 UI 状态**。这很好，但请尽量将数据与 UI 状态分开。

所以 React 告诉我们不应该存储数据（我说的是 todos 的数据），而对我来说，Redux 则相反。

据我了解，我倾向于 React 方面，因为 React 和 Redux 都旨在通过存储来预测 UI 状态：

所有无法计算的内容（例如：所有人工输入）并且是 UI 的一部分：

复选框值 输入值 无线电值 ...

可用于构建查询并将其发送到 API/数据库的所有最少数据，该 API/数据库将返回完整的用户资料、朋友列表等...：

用户 ID 创建日期范围 项目 ID ...

对我来说排除所有数据库/API 结果，因为：

代表数据级别 可以通过发送正确的（并由纯 reducer 计算）查询来计算。

那么您对此有何看法？

【问题讨论】：

有点不清楚你到底在问什么。但是如果你正在渲染一个列表，你可以让 redux 存储该项目数组。项目列表一开始是空的，但随后您可以调用您的 API 并使用 API 返回的列表更新 redux 状态。

如果你只是在没有 Redux 的情况下使用 React，数据将作为状态存储在一个或多个组件中。您可以通过道具将该状态传递给子组件。在 Redux 中，状态存在于一个地方，并作为道具传递给“订阅”React 组件。

@DanielN 在我的回答中添加了一些新的解释。我看到 React 文档中的声明仅与该示例有关。因为组件已经通过 props 接收到了他的数据，所以它不是 state，并不意味着这个数据不在另一个组件（根组​​件）的 state 中

【参考方案1】：

我觉得问题在于，最初 Redux 的推动力非常大，而且有些人非常纯粹，以至于他们主张将所有内容都分离到 Redux，并在每次更改时重新渲染整个应用程序。然后我们最终得到了创建者的 this response，这实际上只是增加了一个混乱，因为 redux 曾经是并且仍然是新的 React 应用程序的事实上的标准，并且很多教程都假设它。

所以，我觉得人们都受到了来自各方的压力，而且他们经常在没有真正理解为什么应该做的情况下做一些事情（尤其是创建常量、动作和减速器的新手）。因此，对于那些阅读它的人，请不要从 redux 开始，并将其保持在本地状态（但尽量保持在像 DataContainer 这样的组件中）。 对于那些需要 redux 的人来说，经验法则是放置所有异步数据（因此所有请求都通过 redux），以及独立组件所需的数据。如果组件明显位于附近，请将其保持在本地状态并作为道具传递。

Redux 是一个非常有用的库，但只有在您开始拥有至少多个路由、不同的查询选项和一些复杂的 UI 之后，才需要它的强大功能。在此之前，您很有可能过度工程化（当然，如果您确定自己会超过这个大小，请随意从 Redux 开始）。再说一次，你永远不会想把你的滑块或小的下拉位置放在 store 中——react 的状态非常适合它。

【参考方案2】：

关于 View 组件状态 的 React 文档，但有关 应用程序状态 的 Redux 文档。因此，定义之间没有冲突。

如果我们谈论 Redux - 你让所有组件都没有状态（并在 react-redux 的 connect 函数的帮助下将无状态根组件转换为有状态）。如果你有来自服务器的大量响应并且你使用分页/过滤器显示你的数据，你可以将你的应用程序状态视为你在屏幕上看到的，而不是将所有数据放在 Redux 存储中，只将你需要的数据放在 render （例如, 100 行显示页面和总行数显示分页）。 对此没有限制。您可以将整个数据放到另一个地方。例如，在 web-worker 中的另一个数据容器中（我在 web-worker 中发出完整请求并从那里获取只需要显示的数据）。

---

在问题编辑后添加：

产品的原始列表是作为道具传入的，所以这不是状态。

在该示例中，产品列表未列出的原因 - 它已经在 props 中。这意味着父组件之一具有此状态。