Redux - Comment ajouter une entrée de gamme dans le réducteur

Je coincé avec ce bit et je ne peux pas le progrès - je suppose que la solution est simple, mais je ne peux pas comprendre. Je suis en train d'ajouter une entrée dans le réducteur de sorte que les données dans ressemblerait à quelque chose ce:

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

La mesure où cela est le plus proche de ce que je reçois, mais, au lieu d'ajouter une nouvelle entrée unique, il est le remplacement de celui qui est stocké déjà. Aussi j'ai besoin d'être en mesure d'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?

  • Pouvez-vous écrire un contexte à l'exemple? Par exemple, pouvez-vous indiquer la forme de l'action la manipulation des intros réducteur?
  • Je suis dispatching quelque chose comme ceci: addEntry({ entryId, entryName, uniqueEntryid })
  • Essayez ceci: lien
  • grâce jzm un effort. J'ai essayé quelque chose de similaire, mais le problème est à l'état initial / de la première entrée, entryId est pas défini. Vous pouvez voir la question que je vais avoir lorsque vous définissez l'état initial à vide de l'objet c'est à dire const état = {}; Et, puisque toutes les valeurs sont dynamiques, je n'ai pas différent de l'état initial
InformationsquelleAutor eloleon | 2016-06-20
  1. 22

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

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

    ES6 écart avec les 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 est un exemple de quelque chose de très similaire à ce que vous faites.

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

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

    Mise à jour:

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

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

    Je pense que c'est un assez bon exemple de la façon douloureuse, elle peut travailler à Réagir/redux à l'aide d'un fortement imbriqués structure de données. FWIW, il a été recommandé à moi à plusieurs reprises pour aplatir votre état autant que possible.

    • Grâce dannyid! J'ai essayé la même chose et le problème est que l'état initial est un objet vide donc cette ligne '...état[entryId][entryName] se jeté erreur
    • Ahh, c'est une pièce importante de l'info! Pouvez-vous mettre à jour votre question et je vais mettre à jour ma réponse?
    • Je mettrai à jour la question maintenant. BTW, j'ai travaillé autour de mon problème avec à peu près exactement la même approche que vous "|| []"
    • Est-il un moyen simple? peut-être immutable js?
    • Immuable js serait sans doute bon d'ici.
    InformationsquelleAutor jaybee