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]) // falseconsole.log(newState[1] === state[1]) // trueconsole.log(newState[2] === state[2]) // false

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