如何規范化 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

如果您有權訪問服務器實現，則可以直接在那里完成規范化。 然而，更有可能的是，您將使用第三方庫（例如normalizr ）對客戶端中的狀態進行規范化。

有幾篇文章討論了這個話題，例如這篇關於 Hackernoon 的文章。

Answer 2

一個常見的模式是遵循本指南，規范狀態形狀。 不要築巢。 創建一個存儲實體的 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 個級別：一級用於對象，一級用於子級。 objects存儲 ID 和實體。 子項為每個對象鍵及其子項存儲一個數組。 請注意，在 ny 示例中，數組中只有一個孩子，但您可以擁有類似

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

Answer 3

@ngrx/entity 是使您的商店正常化的非常巧妙的方式。 看看這個@ngrx/entity 自述文件。

此外，它還帶有強大的實體適配器和選擇器。