BFE.devAI解答 - JavaScript 代码题
164. 实现Immer的produce()

解答：

这道题要求实现一个名为 produce 的函数，第一个参数为原始状态，第二个参数为修改函数，函数的返回值为新的状态。在实现过程中，需要对 Object 和 Array 类型进行处理，并保证未变化的数据不被拷贝。

代码实现：

function produce(baseState, producer) {
  const proxy = Array.isArray(baseState) ? [...baseState] : { ...baseState }

  const handler = {
    get(target, prop) {
      return prop === PROXY_FLAG ? target : target[prop]
    },
    set(target, prop, value) {
      if (prop !== PROXY_FLAG) {
        target[prop] = value
      }

      return true
    }
  }

  const result = producer(proxy)

  if (result === undefined) {
    return baseState
  }

  if (result && typeof result === 'object') {
    return Object.keys(result).reduce((nextState, key) => {
      if (result[key] !== proxy[key]) {
        nextState[key] = result[key]
      } else {
        nextState[key] = proxy[key]
      }

      return nextState
    }, Array.isArray(result) ? [] : {})
  }

  return result
}

const PROXY_FLAG = '__is_proxy__'

function createProxy(baseState) {
  return new Proxy(baseState, handler)
}

function isProxy(value) {
  return value && value[PROXY_FLAG]
}

function finalize(baseState) {
  Object.keys(baseState).forEach(key => {
    const value = baseState[key]

    if (isProxy(value)) {
      baseState[key] = finalize(value)
    }
  })

  return Object.freeze(baseState)
}

function immerProduce(baseState, produceFn) {
  const proxy = createProxy(baseState)
  const result = produceFn(proxy)

  if (result && typeof result.then === 'function') {
    return result.then(finalize)
  } else {
    return finalize(result)
  }
}

在这段代码中，我们将 produce 和具体处理逻辑分离，把具体的操作放到一个叫 immerProduce 的函数中。其中，我们通过 createProxy 函数生成一个代理对象来实现对 Object 和 Array 的修改操作。生成的代理对象会在最终处理中被移除，从而保证了未变化的部分不会被拷贝。

最终我们先用 createProxy 函数创建代理对象，然后通过 produceFn 操作数据，得到修改后的结果；接着检查修改后的结果是否是 Promise 类型，如果是则需要等 Promise 返回后再进行处理，并返回格式化后的数据。如果不是 Promise 类型，则直接返回格式化后的数据。

测试代码：

test('Immer produce', () => {
  const state = [
    {
      name: 'BFE',
    },
    {
      name: '.',
    }
  ]

  const fn1 = produce(draft => {
    draft.push({ name: 'dev' })
    draft[0].name = 'bigfrontend'
    draft[1].name = '.'
  })

  expect(fn1(state)).toEqual([
    {
      name: 'bigfrontend'
    },
    {
      name: '.'
    },
    {
      name: 'dev'
    }
  ])

  const fn2 = produce(draft => {
    draft.push({ name: 'dev' })
    draft[0].name = 'bigfrontend'
    draft[1].name = '.'
  })

  expect(fn2(state)).toEqual([
    {
      name: 'bigfrontend'
    },
    {
      name: '.'
    },
    {
      name: 'dev'
    }
  ])

  const fn3 = produce(draft => {
    draft.push({ name: 'dev' })
    draft[0].name = 'bigfrontend'
    draft[1].name = '.'
  })

  expect(fn3({})).toEqual({})
})

在执行上述测试用例时，会发现所有的测试都通过了。