在 React Redux 应用程序中规范化状态的示例是啥？

Posted 2023-02-22

【中文标题】在 React Redux 应用程序中规范化状态的示例是啥？

【英文标题】：What is an example of normalizing the state in a React Redux app?在 React Redux 应用程序中规范化状态的示例是什么？

【发布时间】：2016-12-23 18:40:26

【问题描述】：

我正在阅读 Redux Reducers docs，但不知道标准化状态的工作原理。示例中的当前状态是这样的：

  visibilityFilter: 'SHOW_ALL',
  todos: [
    
      text: 'Consider using Redux',
      completed: true,
    ,
    
      text: 'Keep all state in a single tree',
      completed: false
    
  ]

您能否提供一个示例，说明如果我们遵循以下内容会是什么样子？

对于 例如，保留 todosById: id -> todo 和 todos: 数组 在真正的应用程序中状态会是一个更好的主意，但我们会保留 例子很简单。

【参考方案1】：

这个例子直接来自Normalizr。

[
  id: 1,
  title: 'Some Article',
  author: 
    id: 1,
    name: 'Dan'
  
, 
  id: 2,
  title: 'Other Article',
  author: 
    id: 1,
    name: 'Dan'
  
]

可以这样归一化-

  result: [1, 2],
  entities: 
    articles: 
      1: 
        id: 1,
        title: 'Some Article',
        author: 1
      ,
      2: 
        id: 2,
        title: 'Other Article',
        author: 1
      
    ,
    users: 
      1: 
        id: 1,
        name: 'Dan'
      
    
  

归一化有什么好处？

您可以提取您想要的状态树的确切部分。

例如，您有一个包含有关文章信息的对象数组。如果要从该数组中选择特定对象，则必须遍历整个数组。最坏的情况是数组中不存在所需的对象。为了克服这个问题，我们对数据进行了标准化。

要规范化数据，请将每个对象的唯一标识符存储在单独的数组中。让我们将该数组称为results。

result: [1, 2, 3 ..]

并将对象数组转换为一个对象，其键为id（参见第二个sn-p）。将该对象称为entities。

最终，要使用id 1 访问对象，只需执行此操作-entities.articles["1"]。

【讨论】：

为什么还需要结果数组？对我来说，规范化只是将数据结构从数组更改为哈希以加快查找速度，但它仍然是嵌套的。我不明白它是如何平坦的

@mangocaptain 您也可以深入一层并规范化该数据！需要该数组来重现原始对象数组。例如。 results.map(id => entities.articles[id]) 将返回原始对象数组。这是单独数组的一个用例。

@mangocaptain 如果用户希望从 UI 中删除一些元素，只需从 results 数组中删除这些元素。这将触发 React 中的重新渲染。在重新渲染时，results.map(id => entities.articles[id‌​]) 将生成更新的数据。原谅我，如果我对你没有任何意义。但是如果你使用 React+Redux 构建一些示例项目，你会更好地理解。

【参考方案2】：

您可以为此使用normalizr。

Normalizr 采用 JSON 和架构，并用其 ID 替换嵌套实体，将所有实体收集到字典中。

例如，

[
  id: 1,
  title: 'Some Article',
  author: 
    id: 1,
    name: 'Dan'
  
, 
  id: 2,
  title: 'Other Article',
  author: 
    id: 1,
    name: 'Dan'
  
]

可以归一化为

  result: [1, 2],
  entities: 
    articles: 
      1: 
        id: 1,
        title: 'Some Article',
        author: 1
      ,
      2: 
        id: 2,
        title: 'Other Article',
        author: 1
      
    ,
    users: 
      1: 
        id: 1,
        name: 'Dan'