web-dev-qa-db-fra.com

Redux - Comment ajouter une entrée au tableau dans le réducteur

Je suis resté avec ce morceau et je ne peux pas progresser - je suppose que la solution est simple mais je ne peux pas comprendre. J'essaie d'ajouter une entrée dans le réducteur pour que les données dans ressemblent à ceci:

state = {
  entryId: {
    entryName: ["something", "something2", "something3" /* and so on... */]
  }
};

Jusqu'à présent, c'est le plus proche que j'obtiens, mais, au lieu d'ajouter une nouvelle entrée unique, il remplace celui qui est déjà stocké. Je dois également pouvoir ajouter cet élément à l'état vide où entryId, entryName n'existe pas encore pour éviter l'erreur:

switch(type) {
  case ADD_ENTRY:
    return {
      ...state,
      [entryId]: {
        ...state[entryId],
        [entryName]: {
          [uniqueEntry]: true
        }
      }
    };
}

Une idée de ce que je fais mal?

reactjsecmascript-6reduxreact-reduxecmascript-7
19
eloleon

Si vous essayez d'ajouter un élément à la fin du tableau entryName, vous devriez faire:

return {
  ...state,
  [entryId]: {
    ...state[entryId],
    [entryName]: [
      ...state[entryId][entryName],
      uniqueEntry
    ]
  }
};

La diffusion d'ES6 avec des tableaux fonctionne comme ceci:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const eight = 8;

const newArray = ['stuff', ...array1, 'things', ...array2, ...[7, eight], 9];
console.log(newArray); // ["stuff", 1, 2, 3, "things", 4, 5, 6, 7, 8, 9]

Découvrez ce Gist qui a un exemple de quelque chose de très similaire à ce que vous faites.

J'ai également trouvé cet ensemble d'exemples extrêmement utile. Beaucoup de bonnes choses ici:

https://github.com/sebmarkbage/ecmascript-rest-spread

Mise à jour:

Si entryName est initialisé à undefined comme vous le dites dans votre commentaire, vous pouvez le faire:

return {
  ...state,
  [entryId]: {
    ...state[entryId],
    [entryName]: [
      ...state[entryId][entryName] || [],
      uniqueEntry
    ]
  }
};

Je pense que c'est un très bon exemple de la difficulté de travailler avec React/redux en utilisant une structure de données fortement imbriquée. FWIW, il m'a été recommandé à plusieurs reprises d'aplatir votre état autant que possible.

22
jaybee