javascript - 什么时候应该在 Redux reducer 中深度克隆状态的哪一部分？

Question

我已经这样写我的 reducer 很长时间了:

const init = {
  a: 'b'
}

const reducerName = function (state = init, action) {
  let newState = _.cloneDeep(state) // using lodash
  case 'ACTION_NAME':
    newState.a = 'c'
    return newState
  default:
    return state
}

有一天我意识到，这可能是一种非常愚蠢的做法，因为每次触发操作时我都会在每个 reducer 中创建一个新对象，即使状态根本不会改变。

因此，我的同事向我传递了 Dan Abramov 的推文，他在推文中说没有必要深度克隆状态。这让我开始思考，何时以及如何实际进行深度克隆。

假设我在 reducer 中有这种状态:

const init = {
  very: {
    deeply: {
      nested: 'string'
    }
  }
  notSoDeeplyNested: 'string'
}

那么以下哪一项是管理状态的正确方式/最接近正确方式:

1)

const reducerName = function (state = init, action) {
  case 'ACTION_NAME':
    let newState = Object.assign({}, state) // Make a shallow copy
    newState.very.deeply = action.deeply
    return newState
  default:
    return state
}

2)

const reducerName = function (state = init, action) {
  case 'ACTION_NAME':
    let newVery = _.cloneDeep(state.very)
    let newState = Object.assign({}, state, very)
    newState.very.deeply = action.deeply
    return newState
  default:
    return state
}

3)

const reducerName = function (state = init, action) {
  case 'ACTION_NAME':
    let newDeeply = _.cloneDeep(state.very.deeply)
    let newState = Object.assign({}, state, { very: { deeply: newDeeply } ) // Cloning only the nested part, which actually changes?
    newState.very.deeply = action.deeply
    return newState
  default:
    return state
}

即使对我来说，最后一个似乎也不合适，但我很难理解这一点。

因此，据我所知，至少每次都必须进行浅拷贝，但我应该什么时候深度克隆某些东西，它应该是对象的哪一部分？我所说的哪一部分是第一级对象还是嵌套部分？

Answer 1

回答您的问题:不，您没有深度克隆。相反，您有选择地浅拷贝需要更改的部分。您可以使用解构来仅针对有更改的路径，同时保留对未更改部分的现有引用。

在下面的示例中，它将 init 浅复制到一个对象，但将 very 替换为一个新对象。 very 对象也是如此。它浅复制 init.very 中的所有内容，但将 deeply 替换为新值。

case 'ACTION_NAME':
  return {
    ...init,
    very: {
      ...init.very,
      deeply: action.deeply
    }
  };

它在 ES5 中转换为:

case 'ACTION_NAME':
  return Object.assign({}, init,
    {very: Object.assign({}, init.very,
      {deeply: action.deeply})});

最后，您有一个新的状态对象，它部分由现有值和引用组成，部分由更改的值组成，类似于持久数据结构。我们更改了导致数据更改的对象，但不是所有内容都达到可以称为深度克隆的程度。

对于深层结构，它可能会变得冗长，但是 Redux advocates shallow objects而不是深层嵌套的。