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]})
// [1, 2, 3, 4, 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}}
)
//  [0, 2, 3, 4]

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}})
// [2, 2, 3, 4]

1. {$push: array}

2. {$set: any}

3. {$merge: object}

4. {$apply: function}

1. `{$push: array}`

動画リスト - JavaScript コーディング問題12. Immutability helperを実装する

動画リスト - JavaScript コーディング問題
12. Immutability helperを実装する