如何规范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']
  }
}

请注意，该状态有两个级别:一个用于对象，一个用于子级。objects存储ids和实体。子对象，为每个对象键存储一个数组和其子键。注意，在ny示例中，数组中只有一个子元素，但是您可以使用以下内容

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

Answer 2

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

有几篇文章讨论了这个主题，例如这个在Hacker正午。

Answer 3

@ngrx/entity是使商店正常化的非常巧妙的方式。看看这个@ngrx/entity ReadMe。

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