State 范式化

事实上，大部分程序处理的数据都是嵌套或互相关联的。例如，一个博客中有多篇文章，每篇文章有多条评论，所有的文章和评论又都是由用户产生的。这种类型应用的数据看上去可能是这样的：

  1. const blogPosts = [
  2.     {
  3.         id : "post1",
  4.         author : {username : "user1", name : "User 1"},
  5.         body : "......",
  6.         comments : [
  7.             {
  8.                 id : "comment1",
  9.                 author : {username : "user2", name : "User 2"},
  10.                 comment : ".....",
  11.             },
  12.             {
  13.                 id : "comment2",
  14.                 author : {username : "user3", name : "User 3"},
  15.                 comment : ".....",
  16.             }
  17.         ]    
  18.     },
  19.     {
  20.         id : "post2",
  21.         author : {username : "user2", name : "User 2"},
  22.         body : "......",
  23.         comments : [
  24.             {
  25.                 id : "comment3",
  26.                 author : {username : "user3", name : "User 3"},
  27.                 comment : ".....",
  28.             },
  29.             {
  30.                 id : "comment4",
  31.                 author : {username : "user1", name : "User 1"},
  32.                 comment : ".....",
  33.             },
  34.             {
  35.                 id : "comment5",
  36.                 author : {username : "user3", name : "User 3"},
  37.                 comment : ".....",
  38.             }
  39.         ]    
  40.     }
  41.     // and repeat many times
  42. ]

上面的数据结构比较复杂，并且有部分数据是重复的。这里还存在一些让人关心的问题：

  • 当数据在多处冗余后，需要更新时，很难保证所有的数据都进行更新。
  • 嵌套的数据意味着 reducer 逻辑嵌套更多、复杂度更高。尤其是在打算更新深层嵌套数据时。
  • 不可变的数据在更新时需要状态树的祖先数据进行复制和更新，并且新的对象引用会导致与之 connect 的所有 UI 组件都重复 render。尽管要显示的数据没有发生任何改变，对深层嵌套的数据对象进行更新也会强制完全无关的 UI 组件重复 render

正因为如此，在 Redux Store 中管理关系数据或嵌套数据的推荐做法是将这一部分视为数据库，并且将数据按范式化存储。

设计范式化的 State

范式化的数据包含下面几个概念：

  • 任何类型的数据在 state 中都有自己的 “表”。
  • 任何 “数据表” 应将各个项目存储在对象中，其中每个项目的 ID 作为 key，项目本身作为 value。
  • 任何对单个项目的引用都应该根据存储项目的 ID 来完成。
  • ID 数组应该用于排序。

上面博客示例中的 state 结构范式化之后可能如下：

  1. {
  2.     posts : {
  3.         byId : {
  4.             "post1" : {
  5.                 id : "post1",
  6.                 author : "user1",
  7.                 body : "......",
  8.                 comments : ["comment1", "comment2"]    
  9.             },
  10.             "post2" : {
  11.                 id : "post2",
  12.                 author : "user2",
  13.                 body : "......",
  14.                 comments : ["comment3", "comment4", "comment5"]    
  15.             }
  16.         }
  17.         allIds : ["post1", "post2"]
  18.     },
  19.     comments : {
  20.         byId : {
  21.             "comment1" : {
  22.                 id : "comment1",
  23.                 author : "user2",
  24.                 comment : ".....",
  25.             },
  26.             "comment2" : {
  27.                 id : "comment2",
  28.                 author : "user3",
  29.                 comment : ".....",
  30.             },
  31.             "comment3" : {
  32.                 id : "comment3",
  33.                 author : "user3",
  34.                 comment : ".....",
  35.             },
  36.             "comment4" : {
  37.                 id : "comment4",
  38.                 author : "user1",
  39.                 comment : ".....",
  40.             },
  41.             "comment5" : {
  42.                 id : "comment5",
  43.                 author : "user3",
  44.                 comment : ".....",
  45.             },
  46.         },
  47.         allIds : ["comment1", "comment2", "comment3", "commment4", "comment5"]
  48.     },
  49.     users : {
  50.         byId : {
  51.             "user1" : {
  52.                 username : "user1",
  53.                 name : "User 1",
  54.             }
  55.             "user2" : {
  56.                 username : "user2",
  57.                 name : "User 2",
  58.             }
  59.             "user3" : {
  60.                 username : "user3",
  61.                 name : "User 3",
  62.             }
  63.         },
  64.         allIds : ["user1", "user2", "user3"]
  65.     }
  66. }

这种 state 在结构上更加扁平。与原始的嵌套形式相比，有下面几个地方的改进：

  • 每个数据项只在一个地方定义，如果数据项需要更新的话不用在多处改变
  • reducer 逻辑不用处理深层次的嵌套，因此看上去可能会更加简单
  • 检索或者更新给定数据项的逻辑变得简单与一致。给定一个数据项的 type 和 ID，不必挖掘其他对象而是通过几个简单的步骤就能查找到它。
  • 每个数据类型都是唯一的，像改评论这样的更新仅仅需要状态树中 “comment > byId > comment” 这部分的复制。这也就意味着在 UI 中只有数据发生变化的一部分才会发生更新。与之前的不同的是，之前嵌套形式的结构需要更新整个 comment 对象，post 对象的父级，以及整个 post 对象的数组。这样就会让所有的 Post 组件和 Comment 组件都再次渲染。

需要注意的是，范式化的 state 意味更多的组件被 connect，每个组件负责查找自己的数据，这和小部分的组件被 connect，然后查找大部分的数据再进行向下传递数据是恰恰相反的。事实证明，connect 父组件只需要将数据项的 Id 传递给 connect 的子对象是在 Redux 应用中优化 UI 性能的良好模式，因此保持范式化的 state 在提高性能方面起着关键作用。

组织 State 中的范式化数据

一个典型的应用中通常会有相关联的数据和无关联数据的混合体。虽然我们对这种不同类型的数据应该如何组织没有一个单一的规则，但常见的模式是将关系 “表” 放在一个共同的父 key 中，比如：“entities”。通过这种模式组织的 state 看上去长得像这样：

  1. {
  2.     simpleDomainData1: {....},
  3.     simpleDomainData2: {....}
  4.     entities : {
  5.         entityType1 : {....},
  6.         entityType2 : {....}
  7.     }
  8.     ui : {
  9.         uiSection1 : {....},
  10.         uiSection2 : {....}
  11.     }
  12. }

这样可以通过多种方式进行扩展。比如一个对 entities 要进行大量编辑的应用可能希望在 state 中保持两组 “表”，一个用于存储 “当前”（current） 的项目，一个用于存储 “正在进行中”(work-in-progress) 的项目。当数据项在被编辑的时候，其值可以被复制到 “正在进行中” 的那个表中，任何更新他的动作都将在 “正在进行中” 的表中工作，编辑表单被该组数据控制着，UI 仍然被原始数据控制着。表单的 “重置” 通过移除 “正在进行中” 表的数据项然后从 “当前” 表中复制原始数据到 “正在进行中” 表中就能轻易做到，表单的 “应用” 通过把 “正在进行中” 表的数据复制到 “当前” 表中就能实现。

表间关系

因为我们将 Redux Store 视为数据库，所以在很多数据库的设计规则在这里也是适用的。例如，对于多对多的关系，可以设计一张中间表存储相关联项目的 ID（经常被称作 “连接表” 或者 “关联表”）。为了一致起见，我们还会使用相同的 byId 和 allIds 用于实际的数据项表中。

  1. {
  2.     entities: {
  3.         authors : { byId : {}, allIds : [] },
  4.         books : { byId : {}, allIds : [] },
  5.         authorBook : {
  6.             byId : {
  7.                 1 : {
  8.                     id : 1,
  9.                     authorId : 5,
  10.                     bookId : 22
  11.                 },
  12.                 2 : {
  13.                     id : 2,
  14.                     authorId : 5,
  15.                     bookId : 15,
  16.                 }
  17.                 3 : {
  18.                     id : 3,
  19.                     authorId : 42,
  20.                     bookId : 12
  21.                 }
  22.             },
  23.             allIds : [1, 2, 3]
  25.         }
  26.     }
  27. }

像 “查找这个作者所有的书” 这个操作可以通过在连接表上一个单一的循环来实现。相对于应用中一般情况下数据量和 JavaScript 引擎的运行速度，在大多数情况下，这样操作的性能是足够好的。

嵌套数据范式化

因为 API 经常以嵌套的形式发送返回数据，所以该数据需要在引入状态树之前转化为规范化形态。Normalizr 库可以帮助你实现这个。你可以定义 schema 的类型和关系，将 schema 和响应数据提供给 Normalizr，他会输出响应数据的范式化变换。输出可以放在 action 中，用于 store 的更新。有关其用法的更多详细信息，请参阅 Normalizr 文档。