Question

我正在使用ngrx/store和Angular 6。我在商店里有深层嵌套结构。但我觉得保持这样的方式并不正确：

const state = [
  {
    aliases: ['alias1', 'alias2'],
    isRequired: false,
    isSensitive: false,
    name: 'Adress',
    timezoneId: 'UTC',
    children: []
  },
  {
    aliases: ['alias3', 'alias4'],
    isRequired: true,
    isSensitive: false,
    name: 'Phone',
    timezoneId: 'UTC-5',
    children: [
      {
        aliases: ['alias1', 'alias2'],
        isRequired: true,
        isSensitive: false,
        name: 'Sub-Phone',
        timezoneId: 'UTC-5',
        children: [
          {
            aliases: ['alias-phone1', 'alias-phone2'],
            isRequired: false,
            isSensitive: true,
            name: 'Sub-Sub-Phone',
            timezoneId: 'UTC',
            children: []
          }
        ]
      }
    ]
  }
]

此处属性name与id类似，它在同一级别上不能相同，但它可以在子级中。例如，Sub-Phone和Sub-Sub-Phone可以命名为Phone。在商店中保持这种类型结构的最佳方法是什么，这种结构很容易改变。因为现在如果想要改变name: 'Phone'我应该在reducer中返回与他所有孩子完整的对象。我怎样才能使它正常化？

Answer 1

如果您可以访问服务器实现，则可以直接在那里进行规范化。但是，您更有可能使用第三方库（例如normalizr）来规范客户端中的状态。

有几篇文章讨论了这个主题，例如this one on Hackernoon。

Answer 2

常见的模式是遵循this guide，以规范状态。不要窝。创建存储实体的密钥。然后创建一个存储关系的密钥（子项，在您的场景中）。我为你建立了一个样本状态

const state = {
  objects: {
    id: ['Address', 'Phone', 'Sub-Phone', 'Sub-Sub-Phone'],
    entities: {
      'Address': {
        isRequired: false,
        isSensitive: false,
        timezoneId: 'UTC'
      },
      'Phone': {
        isRequired: true,
        isSensitive: false,
        timezoneId: 'UTC-5'
      },
      'Sub-Phone': {
        isRequired: true,
        isSensitive: false,
        timezoneId: 'UTC-5',
      },
      'Sub-Sub-Phone': {
        isRequired: false,
        isSensitive: true,
        timezoneId: 'UTC',
      }
    }
  },
  children: {
    'Address': [],
    'Phone': ['Sub-Phone'],
    'Sub-Phone': ['Sub-Sub-Phone']
  }
}

并非状态有2个级别：一个用于对象，一个用于子级。＆＃39;对象＆＃39;存储ID和实体。子节点为每个对象键存储一个数组及其子节点。请注意，在ny示例中，数组中只有一个子节点，但您可以使用类似

的节点

'Phone': '['Sub-Phone', 'Sub-Phone2', 'Sub-Phone3']

Answer 3

@ ngrx / entity是规范化商店的非常简洁的方法。看看这个@ngrx/entity ReadMe。

此外，它还配备了强大的实体适配器和选择器。

如何规范化ngrx / store中的深层嵌套数据？

3 个答案: