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

Question

我正在阅读Redux Reducers 文档并且没有了解状态正常化的方式.示例中的当前状态是:

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

如果我们按照下面的说法,您能举例说明上述情况吗？

例如,在一个真实的应用程序中保持todosById:{id - > todo}和todos:array在状态中是一个更好的主意,但我们保持示例简单.

Answer 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（参见第二个片段）。将该对象称为entities.

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