在线文档教程

Redux FAQ:组织形态(Organizing State)

Redux FAQ:组织形态(Organizing State)

目录

  • 我必须将我的所有状态都放入 Redux 吗?我应该使用 React 的 setState() 吗?

  • 我可以在我的商店状态中放入函数,承诺或其他不可序列化的项目吗?

  • 如何在我的状态下组织嵌套或重复的数据?

组织状况

我必须将我的所有状态都放入 Redux 吗?我应该使用 React setState()吗?

对此没有“正确的”答案。有些用户更喜欢在 Redux 中保留每一个数据片段,以便始终保持其应用程序的完全可序列化和受控版本。其他人更喜欢在组件的内部状态内保持非关键或UI状态,例如“当前打开的下拉列表”。

使用本地组件状态很好。作为一名开发人员,您的工作是确定组成您的应用程序的状态以及每个州应该在哪里生活。找到适合你的平衡点,并与之配合。

确定应将什么类型的数据放入 Redux 的一些常用经验法则是:

  • 应用程序的其他部分是否关心这些数据?

  • 你需要能够根据这些原始数据创建更多派生数据吗?

  • 是否使用相同的数据来驱动多个组件?

  • 能够将这种状态恢复到某个特定时间点(例如,时间旅行调试)对您来说是否有价值?

  • 你想缓存数据吗(例如,如果它已经存在,而不是重新请求它,使用什么状态)?

有许多社区软件包实现了在 Redux 存储中存储每个组件状态的各种方法,例如 redux-ui,redux-component,redux-react-local 等等。也可以将 Redux 的原理和减速器的概念应用到更新本地组件状态的任务中this.setState( (previousState) => reducer(previousState, someAction))。

更多信息

文章

  • Finding state's place with React and Redux(用 React 和 Redux 查找状态的位置)

讨论

文库

  • Redux 插件目录:组件状态我可以将函数,承诺或其他不可序列化的项目放入商店状态吗?强烈建议您只将简单的可序列化对象,数组和基元放入商店。将不可序列化的商品插入商店在技术上是可行的,但是这样做可能会打破商店内容的坚持和补水的能力,并干扰时间旅行调试。如果您对持久性和时间等事情没有问题-travel调试可能无法按预期工作,那么非常欢迎您将不可序列化的项目放入Redux存储区。最终,这是你的应用程序,以及如何实现它取决于你。与 Redux 的其他许多事情一样,只要确保明白涉及哪些折衷。更多信息

如何在我的状态下组织嵌套或重复的数据?

带 ID,嵌套或关系的数据通常应以“规范化”的方式存储:每个对象应存储一次,以 ID 为键,其他引用该对象的对象应仅存储ID而不是整个对象的副本。将商店的某些部分视为数据库可能会有所帮助,每种商品类型都有单独的“表格”。像 normalizr redux-orm 这样的库可以提供管理规范化数据的帮助和抽象。

更多信息

文档

  • Advanced: Async Actions(高级:异步操作)

  • Examples: Real World example(示例:真实世界的例子)

  • Recipes: Structuring Reducers - Prerequisite Concepts(构建Reducers - 先决条件的概念)

  • Recipes: Structuring Reducers - Normalizing State Shape(构造减速器 - 规范化状态形状)

文章

讨论