Reduxのstate制約について

Question

Reduxの使用するに当たっって, stateを直接変更してはならないという物があるのですがstateの中身を一部変更したいときに下記のコードはstateの制約に反してしまうのかわかりません.

//予想されるstateの状態
state = [
{ bookid: 1, name: 'Rails入門'}
{ bookid: 2, name: 'Go入門' }
 .....
]

// 今書いてる方
var newState = state
newState[0] = { bookid: 1, name: 'React入門' }
return newState;

//予想されるダメな例
state[0] = { bookid: 1, name: 'React入門' }
return state;

Comments

[Kenji.Noguchi]

今書いているのも正しく動かないでしょう。要は現在のステートと変更されたステートの違いを検出してレンダリングが走るので、現在のステートをいじってしまうと違いが検出できなくなってしまいます。ですからstateの複製を作って、複製に対して変更を加えれば良いわけです。その為...スプレッドや_.clone、Object.assign()などが頻用されるわけです。

[2_34_koki]

なるほど。そうすると,今回のような配列の場合はadd, removeしかできなくなります?

Answer 1

配列そのものと、name を書き換えたい book オブジェクトを作り直す必要があります。

方法 1. index で指定する場合

function updateBookByIndex(state, index, name) {
  const newState = state.slice();
  newState[index] = { ...state[index], name };
  return newState;
}

参考: JavaScriptで配列のコピー（値渡し） - Qiita
参考: オブジェクトのspread構文でのマージ - JavaScript Primer

方法 2. bookid で指定する場合

function updateBookById(state, id, name) {
  return state.map(book => book.bookid === id ? { ...book, name } : book);
}