web-dev-qa-db-ja.com

Redux-レデューサーの配列にエントリを追加する方法

私はこのビットで立ち往生し、進歩することはできません-解決策は簡単だと思いますが、私は理解できません。レデューサーにエントリを追加しようとしているので、データは次のようになります。

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

これまでのところ、これが最も近いですが、新しい一意のエントリを追加する代わりに、すでに保存されているエントリを置き換えています。また、エラーを回避するために、entryId、entryNameがまだ存在しない空の状態にこのアイテムを追加できる必要があります。

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

私が間違っていることを知っていますか？

reactjsecmascript-6reduxreact-reduxecmascript-7
19
eloleon

entryName配列の最後に要素を追加しようとしている場合は、次のようにする必要があります。

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

配列を使用したES6スプレッドは次のように機能します。

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]

this Gist をチェックしてください。これには、あなたがやっていることと非常によく似た例があります。

この一連の例も非常に役立つことがわかりました。ここにはたくさんの素晴らしいものがあります：

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

更新：

コメントで言うようにentryNameがundefinedに初期化される場合、これを行うことができます：

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

これは、深くネストされたデータ構造を使用してReact/reduxを操作するのがどれほど苦痛かを示す非常に良い例だと思います。 FWIW、できるだけあなたの状態を平らにすることが何度も勧められました。

22
jaybee