在 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: 数组在真正的应用程序中状态会是一个更好的主意，但我们会保留例子很简单。

【问题讨论】：

标签： reactjs redux state react-redux

【解决方案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'
      }
    }
  }
}

【讨论】：