如何规范化 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一样，同级不能一样，但是可以在children。例如 Sub-Phone 和 Sub-Sub-Phone 可以命名为 Phone。在商店中保留这种易于更改的结构的最佳方法是什么？因为现在如果想改变 name: 'Phone' 我应该 return 在减速器中充满这个 object 和他所有的 children。我怎样才能正常化它？

Answer 1

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

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

Answer 2

一个常见的模式是遵循 this guide，以标准化状态形状。不要筑巢。创建一个存储实体的 id。然后创建一个存储关系的 id（在您的场景中为 children）。我已经为你建立了一个示例状态

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 个级别：一个用于 object，一个用于 children。 objects 存储 ID 和实体。 children 为每个 object 键及其 children 存储一个数组。请注意，在 ny 示例中，数组中只有一个 children，但您可以使用

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

Answer 3

@ngrx/entity 是规范您的商店的非常巧妙的方法。看看这个 @ngrx/entity ReadMe.

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

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

How to normalize deep nested data in the ngrx/store?

angular

reactjs

redux

ngrx

database-normalization