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

Question

I have been writing my reducers like this for a long time:

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
}

One day I realised, that this is probably a very stupid way of doing it, since I am creating a new object in every reducer every time when action is triggered, even if the state would not change at all.

So, my colleague passed me tweet of Dan Abramov, where he says there is no need to deep clone the state. And this got me thinking, when and how to actually do the deep cloning.

Let's say I have this kind of state in reducer:

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

So which one of the following would be the right way/closest to the right way to do manage the state:

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
}

The last one doesn't seem proper even for me, but I have hard time wrapping my head around this.

So, as far as I understand at least a shallow copy has to be done everytime, but when am I supposed to deep clone something and which part of the object it would be? And by which part I mean would it be the first level object or only the nested part?

Answer 1

To answer your question: No, you don't deep-clone. Instead, you selectively shallow-copy parts that need changing. You can use destructuring to only target paths with changes while keeping existing references to unchanged parts.

In the following example, it shallow-copies init to a object but replaces very with a new object. The same goes for the very object. It shallow-copies everything from init.very but replaces deeply with the new value.

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

It translates to this in ES5:

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

In the end, you have a new state object that is comprised partly of existing values and references, and partly of changed values, similar to that of persistent data structures. We changed the objects leading to the changed data, but not everything to the point that it can be called a deep clone.

It can get verbose for deep structures, but Redux advocates shallow objects instead of deeply nested ones.