javascript - Redux 深度复制数组，即使它们保持不变？

Question

如果我的状态如下所示:

const initialState = {
  color: 'blue',
  sizes: ['S', 'M', 'L'],
}

我想改变颜色，我的 reducer 应该返回这个正确的:

return { ...state, color: newColor };

但是状态不会仍然引用旧数组吗？即使我没有修改数组，这是否被视为突变？这样会更好吗？

return {
  ...state,
  color: newColor,
  sizes: state.map.sizes(size => size)
}

如果数组包含对象怎么办？

const initialState = {
  color: 'blue',
  sizes: [
    { color: 'red', size: 'S' },
    { color: 'green', size: 'M' },
    { color: 'blue', size: 'L' }
  ],
}

这是否意味着我必须这样做以避免改变状态？

return {
  ...state,
  color: newColor,
  sizes: state.map.sizes(item => { ...item })
}

另外，与 JSON.stringify 和 JSON.parse 相比，Object.assign 和展开运算符更受青睐，这是否有原因？

Answer 1

不，这不是突变。你所做的一切都很好。

看看:

const obj1 = {
  a: 1,
  b: 2,
  c: 3
};

const obj2 = {
  ...obj1,
  c: 4
};

创建第二个对象时，第一个对象的任何成员都不会被更改。

在 Redux 情况下(或者实际上，在 FP 代码库中，使用纯函数的任何时候)，只要引用是只读，共享引用就没有坏处。

这意味着当你构造一个新对象时，它的属性可以直接引用另一个对象的属性，只要你不改变任何子属性(因为这些子属性将是共享对象) .