摘要：一些常见的方法如果你需要存储一些每个项目都带有的数据，可以使用或者对象数组来保存。数组对象这是最常见的一种范式。对象数组这让你可以遍历列表并轻松访问和值，但是它做到以的时间复杂度快速访问，因为它是一个数组。
翻译：疯狂的技术宅
作者：Nick Sweeting
英文标题：Shape your redux store like your database
英文原文：https://hackernoon.com/shape-...
说明：本专栏文章首发于公众号：jingchengyideng 。
使用索引可以从多个维度表现数据。(此处应为动图，请看原文)
最近我在RC聊天系统浏览关于 JavaScript 的一些讨论时，注意到了Kate Ray的一个问题：
应该怎样在 redux 存储中结构话我的数据？
的确，这是使用 redux 时最常见的问题之一。
有很多需要考虑的东西，你经常会像访问一个行列表一样遍历数据吗？ 你需要以O(1)的时间复杂度快速访问某些条目吗？
我在实践中得到了一些经验，通常在访问时间和迭代的难易程度之间做一些权衡。
一些常见的方法如果你需要存储一些每个项目都带有id的数据，可以使用Array, Object, 或者 对象数组来保存。
数组对象[{values}]：这是最常见的一种范式。它使迭代变得容易，但是不经过迭代和过滤就不能快速访问特定条目。
categories: [
{name: "abs", id: "32o8wafe", exercises: ["crunches", "plank"]},
{name: "arms", id: "oaiwefjo", exercises: [...]},
{name: "legs", id: "aoijwfeo", exercises: [...]},
]
以id为索引的对象{id: {values}}：
这种方法可以是你以O(1)的时间复杂度快速访问每个项目，但是在使用object.values()进行迭代时，不能很容易地访问给定项目对应的id。
对象数组 [{id: {values}}]：这让你可以遍历列表并轻松访问id和值，但是它做到以O(1)的时间复杂度快速访问，因为它是一个数组。
categories: [
{32o8wafe: {name: "abs", exercises: [...]},
{oaiwefjo: {name: "arms", exercises: [...]},
{3oij2e3c: {name: "legs", exercises: [...]},
]
把它像数据库一样构造成由id对行进行索引的结构
在学习redux的过程中，我在Monadical偶然发现了一种不同的方法，它使我们受益于简单的Object.values(state.categories)，并能够以O(1)的时间复杂度快速对单个项目的访问:
categories: {
32o8wafe: {id: "32o8wafe", name: "abs", exercises: [...]},
oaiwefjo: {id: "oaiwefjo", name: "arms", exercises: [...] },
3oij2e3c: {id: "3oij2e3c", name: "legs", exercises: [...] },
}
请注意id既是行的键，同时也是行本身的属性。这一点点重复使我们在访问时间上有了很大的灵活性。这也与Redux文档推荐的归一化（也称扁平）模型兼容。
现在你可以遍历数据了，也可以在迭代时访问id！
Object.values(categories).map(cat => ({id: cat.id, name: cat.name}))
或者通过id快度访问任何项目！
categories[category_id].name
我们将这样组织好的数据发送到前端，前端就不需要做任何处理来生成id: values映射，从而也就减少了错误的产生。在后端很容易做到这一点，因为你很可能从数据库中提取数据，而数据库中已经存在id字段，可以直接将其作为键使用。
索引的力量请注意，我们上面介绍的结构只是一些行的索引，索引是id。你也可以这样设计自己的存储结构：使用你想要用的字段生成索引，来达到O(1)的时间复杂度进行快速访问
按名称索引类别：categories_by_name = {
abs: "32o8wafe",
arms: "oaiwefjo",
legs: "3oij2e3c",
}
const get_category_by_name = (store, name) =>
store.getState().categories[categories_by_name[name]]
也可以为同样的数据构建尽可能多的索引，这样将使你在任何列上基于O(1)的速度进行访问，就像在数据库中一样。
把你存储的数据想象成为图书馆，可以用索引快速找到任何项目（此处应为动图，请看原文）
Normalizr与Reselect这里描述的模式正是Normalizr库所使用的模式。如果你想把你的数据扁平化(按类型分开)，就像我前面介绍的索引概念一样，请阅读Normalizr的文档《Redux Without Profanity docs》。
Redux 和 Normalizr 与 Reselect 配合的也很好，如果你关心性能，并且喜欢有一个中央列表的记忆选择器，可以关注一下。
扩展阅读http://redux.js.org/docs/basi...
http://redux.js.org/docs/reci...
https://egghead.io/lessons/ja...
https://stackoverflow.com/que...
https://stackoverflow.com/que...
https://codeburst.io/how-to-s...
https://tonyhb.gitbooks.io/re...
欢迎扫描二维码关注公众号，每天推送我翻译的技术文章。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84652.html
摘要：我现在写的这些是为了解决和这两个状态管理库之间的困惑。这甚至是危险的，因为这部分人将无法体验和这些库所要解决的问题。这肯定是要第一时间解决的问题。函数式编程是不断上升的范式，但对于大部分开发者来说是新奇的。规模持续增长的应 原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...
摘要：我的教程可能也会帮你一把其他的二分法展示型组件和容器型组件这种分类并非十分严格，这是按照它们的目的进行分类。在我看来，展示型组件往往是无状态的纯函数组件，容器型组件往往是有状态的纯类组件。不要把展示型组件和容器型组件的划分当成教条。 本文译自Presentational and Container Components，文章的作者是Dan Abramov，他同时也是Redux和Crea...
摘要：自己英语一般，水平有限，献上原文地址，还有我翻译的中文地址，欢迎大家勘误下面是自己的一点感想先说一下，我们知道，前端优化有这么几步，第一步首先呢我们知道，一个应用要依赖好多条文件，而浏览器加载完一条，要执行完这条才加载下一条，所以呢，就很慢 自己英语一般，水平有限，献上原文地址，还有我翻译的中文地址，欢迎大家勘误 下面是自己的一点感想 先说一下webpack，我们知道，前端优化有这么几...
摘要：所以，单向数据流的意思是指在变更检测期间属性绑定变更的架构。相反，输出绑定过程并没有在变更检测期间内运行，所以它没有把单向数据流转变为双向数据流。说的单向数据流说的是服务层，而不是视图层嗷。 原文链接： Do you really know what unidirectional data flow means in Angular 关于单向数据流，还可以参考这篇文章，且文中还有 y...
摘要：我把这两大类称作和，但是我也听说他们被称为和和和等。虽然叫法不同，但核心思想都差不多它必须能独立运作。。不能依赖依赖这个的或者部分可以允许有这样的话有助于这个组件有修改弹性接受数据和数据的改变只能通过來处理不必也不能用。 Smart and Dumb Components 原文地址 showImg(https://segmentfault.com/img/bVrpJl); 当我在写Re...
阅读 1774·2021-11-18 10:02
阅读 3507·2021-11-16 11:45
阅读 1755·2021-09-10 10:51
阅读 2064·2019-08-30 15:43
阅读 1355·2019-08-30 11:23
阅读 1460·2019-08-29 11:07
阅读 1873·2019-08-23 17:05
阅读 1342·2019-08-23 16:14
