数据应该放在 redux 状态树中吗?
Should data go in a redux state tree?
我对在 Redux 的状态树中保留什么有点迷茫。
我看到关于在状态树中存储什么的两个相互矛盾的陈述。
- React doc 告诉我们只有 用户输入 应该存储在状态树中。
The original list of products is passed in as props, so that's not state. The search text and the checkbox seem to be state since they change over time and can't be computed from anything. And finally, the filtered list of products isn't state because it can be computed by combining the original list of products with the search text and value of the checkbox.
- Redux doc告诉我们,我们经常应该在单状态树中存储UI状态和数据:
For our todo app, we want to store two different things:
- The currently selected visibility filter;
- The actual list of todos.
You’ll often find that you need to store some data, as well as some UI state**, in the state tree. This is fine, but try to keep the data separate from the UI state.
所以 React 告诉我们不应该存储数据(我说的是待办事项的数据),对我来说,Redux 告诉我们相反的事情。
据我所知,我会倾向于 React 方面,因为 React 和 Redux 都旨在通过存储来预测 UI 状态:
所有无法计算的(例如:所有人工输入)并且是 UI:
的一部分
- 复选框值
- 输入值
- 电台值
- ...
可用于构建查询并将其发送到 API/database 的所有 minimal 数据,后者将 return 完成用户资料、好友列表等等...:[=14=]
- 用户 ID
- 创建日期范围
- 项目 ID
- ...
对我来说 排除了所有 database/API 结果 因为:
- 站在数据层面
- 可以通过发送正确的(并由纯 reducer 计算)查询来计算。
那么你对此有何看法?
关于 View Component state 的 React 文档,但是关于 Application state 的 Redux 文档。因此,定义之间不存在冲突。
如果我们谈论 Redux - 你让所有组件都没有状态(并在 react-redux 的帮助下将无状态根组件转换为有状态 connect
功能)。如果你有来自服务器的大量响应并且你使用分页/过滤器显示你的数据,你可以将你的应用程序状态视为你在屏幕上看到的,而不是将所有数据放在 Redux 存储中,只有你需要的 render
(例如,100 行显示页面,总行数显示分页)。 对此没有限制。您可以将整个数据放在另一个地方。例如,在 web-worker 中的另一个数据容器中(我在 web-worker 中发出完整请求并从那里获取只需要显示的数据)。
问题编辑后添加:
The original list of products is passed in as props, so that's not state.
在该示例中,产品列表未显示的原因 - 它已经在 props
中。这意味着父组件之一具有此状态。
我觉得问题在于最初 Redux 被大力推动,有些人是如此纯粹主义者,他们主张将所有内容分离到 Redux 并在每次更改时重新渲染整个应用程序。然后我们最终得到了创建者的 this response,这实际上只会增加混乱,因为 redux 曾经并且仍然是新的 React 应用程序的事实标准,并且很多教程都假设它。
所以,我觉得人们受到来自各方面的压力,他们经常做一些事情并没有真正理解为什么他们应该这样做(尤其是新手创建常量、动作和减速器)。所以,对于那些阅读它的人,请从没有 redux 的情况下开始,并将它保持在本地状态(但尽量保持在 DataContainer
之类的组件中)。
对于那些需要 redux 的人,规则经验是放置所有异步数据(因此所有请求都通过 redux),以及独立组件所需的数据。如果组件明显位于附近,则将其保持在本地状态并作为 props 传递。
Redux 是一个非常有用的库,但只有当你开始拥有至少多个路由、不同的查询选项和一些复杂的东西时,才需要它的强大功能 UI。在此之前,您很有可能会过度设计(但是,当然,如果您确定会超过这个大小,请随意从 Redux 开始)。再说一遍,你真的永远不会想把你的滑块或小的下拉位置放在商店里——反应的状态非常适合它。
我对在 Redux 的状态树中保留什么有点迷茫。
我看到关于在状态树中存储什么的两个相互矛盾的陈述。
- React doc 告诉我们只有 用户输入 应该存储在状态树中。
The original list of products is passed in as props, so that's not state. The search text and the checkbox seem to be state since they change over time and can't be computed from anything. And finally, the filtered list of products isn't state because it can be computed by combining the original list of products with the search text and value of the checkbox.
- Redux doc告诉我们,我们经常应该在单状态树中存储UI状态和数据:
For our todo app, we want to store two different things:
- The currently selected visibility filter;
- The actual list of todos.
You’ll often find that you need to store some data, as well as some UI state**, in the state tree. This is fine, but try to keep the data separate from the UI state.
所以 React 告诉我们不应该存储数据(我说的是待办事项的数据),对我来说,Redux 告诉我们相反的事情。
据我所知,我会倾向于 React 方面,因为 React 和 Redux 都旨在通过存储来预测 UI 状态:
所有无法计算的(例如:所有人工输入)并且是 UI:
的一部分- 复选框值
- 输入值
- 电台值
- ...
可用于构建查询并将其发送到 API/database 的所有 minimal 数据,后者将 return 完成用户资料、好友列表等等...:[=14=]
- 用户 ID
- 创建日期范围
- 项目 ID
- ...
对我来说 排除了所有 database/API 结果 因为:
- 站在数据层面
- 可以通过发送正确的(并由纯 reducer 计算)查询来计算。
那么你对此有何看法?
关于 View Component state 的 React 文档,但是关于 Application state 的 Redux 文档。因此,定义之间不存在冲突。
如果我们谈论 Redux - 你让所有组件都没有状态(并在 react-redux 的帮助下将无状态根组件转换为有状态 connect
功能)。如果你有来自服务器的大量响应并且你使用分页/过滤器显示你的数据,你可以将你的应用程序状态视为你在屏幕上看到的,而不是将所有数据放在 Redux 存储中,只有你需要的 render
(例如,100 行显示页面,总行数显示分页)。 对此没有限制。您可以将整个数据放在另一个地方。例如,在 web-worker 中的另一个数据容器中(我在 web-worker 中发出完整请求并从那里获取只需要显示的数据)。
问题编辑后添加:
The original list of products is passed in as props, so that's not state.
在该示例中,产品列表未显示的原因 - 它已经在 props
中。这意味着父组件之一具有此状态。
我觉得问题在于最初 Redux 被大力推动,有些人是如此纯粹主义者,他们主张将所有内容分离到 Redux 并在每次更改时重新渲染整个应用程序。然后我们最终得到了创建者的 this response,这实际上只会增加混乱,因为 redux 曾经并且仍然是新的 React 应用程序的事实标准,并且很多教程都假设它。
所以,我觉得人们受到来自各方面的压力,他们经常做一些事情并没有真正理解为什么他们应该这样做(尤其是新手创建常量、动作和减速器)。所以,对于那些阅读它的人,请从没有 redux 的情况下开始,并将它保持在本地状态(但尽量保持在 DataContainer
之类的组件中)。
对于那些需要 redux 的人,规则经验是放置所有异步数据(因此所有请求都通过 redux),以及独立组件所需的数据。如果组件明显位于附近,则将其保持在本地状态并作为 props 传递。
Redux 是一个非常有用的库,但只有当你开始拥有至少多个路由、不同的查询选项和一些复杂的东西时,才需要它的强大功能 UI。在此之前,您很有可能会过度设计(但是,当然,如果您确定会超过这个大小,请随意从 Redux 开始)。再说一遍,你真的永远不会想把你的滑块或小的下拉位置放在商店里——反应的状态非常适合它。