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

发布时间：2020-12-15 05:08:18 所属栏目：百科来源：网络整理

导读：我正在阅读Redux Reducers docs并且没有了解状态的正常化.示例中的当前状态是： { visibilityFilter: 'SHOW_ALL',todos: [ { text: 'Consider using Redux',completed: true,},{ text: 'Keep all state in a single tree',completed: false } ]} 如果我们按

我正在阅读Redux Reducers docs并且没有了解状态的正常化.示例中的当前状态是：

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

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

For
example,keeping todosById: { id -> todo } and todos: array inside
the state would be a better idea in a real app,but we’re keeping the
example simple.

这个例子直接来自 Normalizr.

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

可以这种方式归一化 –

{
  result: [1,2],entities: {
    articles: {
      1: {
        id: 1,author: 1
      },2: {
        id: 2,author: 1
      }
    },users: {
      1: {
        id: 1,name: 'Dan'
      }
    }
  }
}

规范化的优势是什么？

您可以提取所需状态树的确切部分.

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

要规范化数据,请将每个对象的唯一标识符存储在单独的数组中.我们将该数组称为结果.

结果：[1,2,3 ..]

并将对象数组转换为以key作为id的对象(请参阅第二个片段).将该对象称为实体.

最终,要访问id为1的对象,只需执行this- entities.articles [“1”].

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!