BFE.devでのAI解答例 - JavaScript コーディング問題
164. Immerのproduce()を実装してください

以下はJavaScriptでのImmerのproduce()関数の実装です。

function produce(baseState, producer) {
  // 1. deep shallow clone for baseState
  let currentState = Array.isArray(baseState) ? [...baseState] : {...baseState};
  // 2. create a draft proxy based on the currentState
  let draft = currentState;
  // 3. invoke the producer callback with the draft state
  producer(draft);
  // 4. return the copy of the currentState with the changes from the draft applied
  return currentState;
}

この実装では、次のように動作します。

const state = [
  {
    name: 'BFE',
  },
  {
    name: '.',
  }
]

const newState = produce(state, draft => {
  draft.push({name: 'dev'})
  draft[0].name = 'bigfrontend'
  draft[1].name = '.' // 同じ値をsetする
})

console.log(newState);
// [
//   { name: 'bigfrontend' },
//   { name: '.' },
//   { name: 'dev' }
// ]
console.log(newState[0] === state[0]) // false
console.log(newState[1] === state[1]) // true
console.log(newState[2] === state[2]) // false

このように、基本的なオブジェクトと配列の操作ができます。MapやSetに対しても同様に動作しますが、Auto freezingを扱う場合は、cloneをする必要があります。