12. Immutability helperを実装する

Reactを使っていれば、ちょっとだけ変更したくてstateをcloneする処理をしたことはあるあるですよね。例えばこちらのstate:

const state = {  a: {    b: {      c: 1    }  },  d: 2}

dを変更したいとき、_.cloneDeepを使うと良い。けど state.aもcloneされて効率が悪い。

もっといい方法ではこちら：

const newState = {  ...state,  d: 3}

簡潔！けどcも変更したいときはすごく複雑になる。

const newState = {  ...state,  a: {    ...state.a,    b: {       ...state.b,       c: 2    }  }}

cloneDeepがマシな気がしてきましたね。この問題を解決するためにやってきたのは Immutability Helper。

Immutability Helperを自作してください。以下のケースをサポートする。

1. {$push: array}

const arr = [1, 2, 3, 4]const newArr = update(arr, {$push: [5, 6]})

2. {$set: any}

const state = {  a: {    b: {      c: 1    }  },  d: 2}const newState = update(  state,   {a: {b: { c: {$set: 3}}}})/*{  a: {    b: {      c: 3    }  },  d: 2}*/

$setを使って配列要素を変更できる

const arr = [1, 2, 3, 4]const newArr = update(  arr,   {0: {$set: 0}})

3. {$merge: object}

const state = {  a: {    b: {      c: 1    }  },  d: 2}const newState = update(  state,   {a: {b: { $merge: {e: 5}}}})/*{  a: {    b: {      c: 1,      e: 5    }  },  d: 2}*/

4. {$apply: function}

const arr = [1, 2, 3, 4]const newArr = update(arr, {0: {$apply: (item) => item * 2}})