像数据库一样设计你的 redux 数据

一时失言乱红尘 2022-06-10 01:50 214阅读 0赞

> 翻译：疯狂的技术宅  
> 作者：Nick Sweeting  
> 英文标题：Shape your redux store like your database  
> 英文原文：[https://hackernoon.com/shape-your-redux-store-like-your-database-98faa4754fd5][https_hackernoon.com_shape-your-redux-store-like-your-database-98faa4754fd5]

**本文首发于公众号：yidengxuetang**

![1_b-Rc3m2h_oQjbplfvp9s6w.gif][]

*使用索引可以从多个维度表现数据。*

最近我在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文档推荐的[归一化][Link 1]（也称扁平）模型兼容。

现在你可以遍历数据了，也可以在迭代时访问`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)的速度进行访问，就像在数据库中一样。

![把你存储的数据想象成为图书馆，可以用索引快速找到任何项目][1_z-jt1KCPbEFCaPBDOpSBrQ.gif]

*把你存储的数据想象成为图书馆，可以用索引快速找到任何项目*

## Normalizr与Reselect ##

这里描述的模式正是[Normalizr][]库所使用的模式。如果你想把你的数据扁平化(按类型分开)，就像我前面介绍的索引概念一样，请阅读Normalizr的文档《[Redux Without Profanity docs][]》。

Redux 和 Normalizr 与 [Reselect][] 配合的也很好，如果你关心性能，并且喜欢有一个中央列表的记忆选择器，可以关注一下。

## 扩展阅读 ##

*  [http://redux.js.org/docs/basics/Reducers.html\#designing-the-state-shape][http_redux.js.org_docs_basics_Reducers.html_designing-the-state-shape]
 *  [http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html][Link 1]
 *  [https://egghead.io/lessons/javascript-redux-normalizing-the-state-shape][https_egghead.io_lessons_javascript-redux-normalizing-the-state-shape]
 *  [https://stackoverflow.com/questions/33940015/how-to-choose-the-redux-state-shape-for-an-app-with-list-detail-views-and-pagina][https_stackoverflow.com_questions_33940015_how-to-choose-the-redux-state-shape-for-an-app-with-list-detail-views-and-pagina]
 *  [https://stackoverflow.com/questions/34995822/how-to-get-best-practice-react-redux-nested-array-data][https_stackoverflow.com_questions_34995822_how-to-get-best-practice-react-redux-nested-array-data]
 *  [https://codeburst.io/how-to-store-your-state-data-f17ceca37aa][https_codeburst.io_how-to-store-your-state-data-f17ceca37aa]
 *  [https://tonyhb.gitbooks.io/redux-without-profanity/content/normalizer.html][Redux Without Profanity docs]

--------------------

*欢迎扫描二维码关注公众号，每天第一时间推送我翻译的国外最新技术文章。*

![SouthEast][]

[https_hackernoon.com_shape-your-redux-store-like-your-database-98faa4754fd5]: https://hackernoon.com/shape-your-redux-store-like-your-database-98faa4754fd5
[1_b-Rc3m2h_oQjbplfvp9s6w.gif]: https://cdn-images-1.medium.com/max/800/1*b-Rc3m2h_oQjbplfvp9s6w.gif
[Monadical]: https://monadical.com/
[Link 1]: http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html
[1_z-jt1KCPbEFCaPBDOpSBrQ.gif]: https://cdn-images-1.medium.com/max/1600/1*z-jt1KCPbEFCaPBDOpSBrQ.gif
[Normalizr]: https://github.com/paularmstrong/normalizr
[Redux Without Profanity docs]: https://tonyhb.gitbooks.io/redux-without-profanity/content/normalizer.html
[Reselect]: https://github.com/reactjs/reselect
[http_redux.js.org_docs_basics_Reducers.html_designing-the-state-shape]: http://redux.js.org/docs/basics/Reducers.html#designing-the-state-shape
[https_egghead.io_lessons_javascript-redux-normalizing-the-state-shape]: https://egghead.io/lessons/javascript-redux-normalizing-the-state-shape
[https_stackoverflow.com_questions_33940015_how-to-choose-the-redux-state-shape-for-an-app-with-list-detail-views-and-pagina]: https://stackoverflow.com/questions/33940015/how-to-choose-the-redux-state-shape-for-an-app-with-list-detail-views-and-pagina
[https_stackoverflow.com_questions_34995822_how-to-get-best-practice-react-redux-nested-array-data]: https://stackoverflow.com/questions/34995822/how-to-get-best-practice-react-redux-nested-array-data
[https_codeburst.io_how-to-store-your-state-data-f17ceca37aa]: https://codeburst.io/how-to-store-your-state-data-f17ceca37aa
[SouthEast]: /images/20220610/fbaeb10091a74f8e9ffee283d8939ee5.png