J'utilise ngrx/store et Angular 6. J'ai une structure imbriquée profonde dans le magasin. Mais je pense que ce n'est pas la bonne façon de le garder comme ça:

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: []
          }
        ]
      }
    ]
  }
]

Ici, la propriété name est comme id, elle ne peut pas être la même au même niveau, mais elle le peut chez les enfants. Par exemple, Sub-Phone et Sub-Sub-Phone pourraient être nommés Phone. Quelle est la meilleure façon de conserver ce type de structure dans le magasin qui sera facile à changer. Car maintenant si je veux changer name: 'Phone' je devrais retourner en réducteur complet cet objet avec tous ses enfants. Comment puis-je le normaliser?

6
mr__brainwash 23 mai 2018 à 14:56

3 réponses

Meilleure réponse

Un modèle courant consiste à suivre ce guide, pour normaliser l'état forme. N'emboitez pas. Créez un identifiant qui stocke les entités. Et puis créez un identifiant qui stocke les relations (les enfants, dans votre scénario). J'ai construit un exemple d'état pour vous

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']
  }
}

Notez que l'état a 2 niveaux: un pour les objets, un pour les enfants. Le objects stocke les identifiants et les entités. Les enfants, stockent un tableau pour chaque clé d'objet avec ses enfants. Notez que dans ny exemple, il n'y a qu'un seul enfant dans les tableaux, mais vous pouvez avoir quelque chose comme

'Phone': '['Sub-Phone', 'Sub-Phone2', 'Sub-Phone3']
2
kmui2 4 mars 2020 à 20:36

@ ngrx / entity est un moyen très intéressant de normaliser votre boutique. regardez ce @ ngrx / entity ReadMe.

Également, il est livré avec un adaptateur d'entité et des sélecteurs puissants.

1
m.akbari 29 mai 2018 à 16:57

Si vous avez accès à l'implémentation du serveur, la normalisation peut s'y faire directement. Plus probablement, cependant, vous allez normaliser l'état dans le client en utilisant une bibliothèque tierce, par exemple, normalizr.

Plusieurs articles traitent de ce sujet, par exemple celui-ci sur Hackernoon.

2
tilo 23 mai 2018 à 12:04