Как нормализовать глубоко вложенные данные в ngrx / store? - PullRequest
Новая
       46

Как нормализовать глубоко вложенные данные в ngrx / store?

0 голосов
/ 23 мая 2018

Я использую 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', я должен вернуть в редуктор полный этот объект со всеми его детьми.Как я могу это нормализовать?

Ответы [ 3 ]

0 голосов
/ 23 мая 2018

Обычным шаблоном является следование этому руководству , чтобы нормализовать форму состояния.Не гнездитесь.Создайте ключ для хранения сущностей.А затем создайте ключ, который хранит отношения (дети, в вашем сценарии).Я построил пример состояния для вас 

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 уровня: один для объектов, другой для детей.«Объекты» хранят идентификаторы и сущности.Дети хранят один массив для каждого ключа объекта со своими детьми.Обратите внимание, что в любом примере в массивах только один дочерний элемент, но вы можете иметь что-то вроде 

'Phone': '['Sub-Phone', 'Sub-Phone2', 'Sub-Phone3']
0 голосов
/ 29 мая 2018

@ ngrx / entity - очень удобный способ нормализовать ваш магазин.взгляните на этот @ ngrx / entity ReadMe .

. Кроме того, он поставляется с мощным адаптером и селекторами объектов.

0 голосов
/ 23 мая 2018

Если у вас есть доступ к реализации сервера, нормализация может быть выполнена там напрямую.Однако более вероятно, что вы собираетесь нормализовать состояние клиента с помощью сторонней библиотеки, например, normalizr .

В этой статье обсуждается несколько статей, например это на Хакернун .

...