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

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 中返回这个对象和他的所有 child 。我该如何规范化它？

Answer 1

一个常见的模式是遵循 this guide , 归一化状态形状。不要嵌套。创建一个存储实体的 id。然后创建一个 id 来存储关系( child ，在你的场景中)。我已经为你建立了一个示例状态

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 个级别:一个用于对象，一个用于子级。 objects 存储 ID 和实体。 child ，为每个对象键及其 child 存储一个数组。请注意，在 ny 示例中，数组中只有一个 child ，但你可以有类似的东西

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