Redux:克隆状态不起作用

Question

我有一个非常简单的问题，但是...

reducer 的代码（在 redux/react-native 应用程序中）：

...
case SAMPLES_DELETE_REQUEST_SUCCESS: {        
    var newState = Object.assign({}, state);
    const indexToDelete = newState.samples.findIndex( sample => {
      return sample.id == action.sample.id
    })
    newState.samples.splice(indexToDelete, 1)
    debugger;
    return newState
  }
...

好的，我复制状态并将其存储到 newState 中。但是当我做newState.samples.splice(indexToDelete, 1)时，newState被正确修改了，而且还state！为什么？？我一定累了...

Answer 1

splice函数修改原始数组。 Object.assign不进行深度克隆。因此，您仍在修改原始状态！

您必须手动复制要克隆的嵌套对象（或数组）：

// Deep Clone
obj1 = { a: 0 , b: { c: 0}};
let obj2 = JSON.parse(JSON.stringify(obj1));

Answer 2

正如之前有人提到的，您可以使用JSON.parse（JSON.stringify（obj））来创建整个对象（嵌套对象）的新副本。如果你不想这样做，你可以检查像不可变JS这样的库。

此外，如果您想使用点差表示法，更好的方法是：

return {
  ...state,
  samples: state.samples.filter(sample => sample.id !== action.sample.id)
}