Question

我有这个代码示例，基于我在一本关于React的书中看到的非常类似的东西。它基本上说明了当一个新项目被添加到待办事项列表时在reducer中发生的事情：

let todos = [
{
  text: 'first',
  done: false
},
{
  text: 'second',
  done: false
}  
]

let state = { todos };

let firstTodosRef = todos[0];

let output = {};

Object.assign(output, state, {
    todos: [
       ...state.todos,
      {
        text: 'third',
        done: false
      }
    ]
})

console.log(output.todos[0] === firstTodosRef)

最后一行中的console.log输出true，因为Object.assign不执行深层复制。我的问题是，从Redux和不变性的角度来看，这是否会使代码无效，还是因为我们只关注添加新项目而无法正常使用？

感谢。

Answer 1

正确的不可变更新应该复制实际更新的所有对象和数组并修改它们，但对所有其他现有值使用原始引用。是的，该代码似乎是正确的。

有关更多示例，请参阅Redux文档中的Immutable Update Patterns页面。

Answer 2

从“不变性”的角度来看，这是有效的代码。因为你添加了一个新的待办事项，你创建了一个新的状态对象而不是改变它，但是因为你保留了前两个项目，所以当测试新版本和旧版本之间的相等性时，你会得到true。

整体不同，但有些部分仍然相同。一些部分保持相同的事实可以用来断言，尽管状态发生了变化，你仍然可以保留旧视图的一部分，只更新不同的部分。

将项添加到数组

2 个答案: