如何规范化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'我应该和所有他的孩子一起归还减速器。我如何将其标准化？

Answer 1

常见的模式是遵循此指南，以规范状态形状。不要筑巢。创建一个存储实体的 id。然后创建一个 id 来存储关系（在您的场景中是子项）。我已经为你建立了一个示例状态

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 个级别：一级用于对象，一级用于子级。存储objectsid 和实体。子项为每个对象键及其子项存储一个数组。请注意，在任何示例中，数组中只有一个子级，但您可以拥有类似的内容

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