[解決済み] reduxを使用してアイテムを削除する方法はこれでよいのでしょうか？

質問

入力に変異を与えてはいけないことは知っていますし、変異させるにはオブジェクトをクローンする必要があります。私は、reduxスタータープロジェクトで使われていた慣習に従っていました。

ADD_ITEM: (state, action) => ({
  ...state,
  items: [...state.items, action.payload.value],
  lastUpdated: action.payload.date
})

項目を追加するために、spread を使用して配列に項目を追加しています。

を削除に使用しました。

DELETE_ITEM: (state, action) => ({
  ...state,
  items: [...state.items.splice(0, action.payload), ...state.items.splice(1)],
  lastUpdated: Date.now() 
})

しかし、これは入力状態オブジェクトを変異させていることになります。新しいオブジェクトを返しているにもかかわらず、これは禁止されているのでしょうか？

解決方法は？

いいえ、決して状態を変異させないでください。

新しいオブジェクトを返すとはいえ、古いオブジェクトを汚染することになるわけで、これは絶対に避けたいことです。これは、古い状態と新しい状態を比較するときに問題になります。例えば shouldComponentUpdate react-reduxがフードの下で使っているものです。また、タイムトラベル（元に戻す、やり直す）も不可能になります。

代わりに、イミュータブルメソッドを使用します。常に Array#slice であり、決して Array#splice .

あなたのコードから推測すると action.payload は削除される項目のインデックスです。よりよい方法は、次のようになります。

items: [
    ...state.items.slice(0, action.payload),
    ...state.items.slice(action.payload + 1)
],