react-redux reducer 出现意外错误

Question

我以为我已经安全地创建了一个新状态，并在我的 Redux reducer 中返回了以下代码。基本上，我需要更改 state.data 数组中的一条记录并返回新状态。我的期望是，由于 newState 是全新的，所以我很好。

安装redux-immutable-state-invariant后，我看到还是有问题（代码和错误如下）。

    let newState = Object.assign({}, state);
    let newData = [];
    newState.data.map(function(rec){
        if (rec.id === sessionIdToUpdate) {
            rec.interestLevel = newInterestLevel;
            newData.push(rec);
        } else {
            newData.push(rec);
        }
    });
    newState.data = newData;
    return newState;

还有错误...

A state mutation was detected inside a dispatch, in the path: `sessions.data.0.interestLevel`

如果我注释掉这一行

rec.interestLevel = newInterestLevel;

错误消失了，但这个 reducer 的用途也消失了。

Answer 1

这是因为Object.assign({}, state) 创建了一个浅拷贝，而data 及其所有rec 对象都与之前的状态对象共享。如果您分配给其中之一，您会改变旧状态。

您可以使用以下方式以声明方式指定新状态，而不是更改 rec：

const newState = {
  ...state,
  data: state.data.map((rec) => 
    rec.id === sessionIdToUpdate ? {...rec, interestLevel: newInterestLevel} : rec        
  )
};