reduxのstateはイミュータブルだけどイミュータブルじゃない
備忘録
reduxのstate
はイミュータブル
reduxが保持している状態はイミュータブルなオブジェクトとして扱われるため、
直接変更することができない。
そのため、state
を変更したい場合には下記のようなコードによって、新しいオブジェクトを作る処理が必要になる。
case ADD_ITEM : return { ...state, arr: [...state.arr, action.newItem] }
state
がイミュータブルではなくなる場合
reduxのstate
はオブジェクト内のプロパティを操作する場合には、直接変更することができる。
case SPLICE_ITEM : state.arr.splice(1, 1); // エラーが発生しない
原因
reduxは浅い参照でstate
の変更を検知している。
仮にstate.arr = newArr
のような処理があった場合には、オブジェクトの参照先メモリが変更されるため、
reduxはエラーを検知することができるが、state.arr.splice(1, 1)
のようにオブジェクト内のプロパティの操作は、
浅い参照では検知することができない。
reduxに検知されないstate
の変更はstate
を使用しているコンポーネントの更新も行われないため、非常に危険。