Question

我正在阅读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 - ＆gt; todo}和todos：里面的数组在一个真实的应用程序中，状态将是一个更好的主意，但我们保持这个例如简单。

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。

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

Answer 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'
      }
    }
  }
}

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

2 个答案: