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;

错误消失了，但这个减速器的目的也是如此。

Answer 1

这是因为Object.assign({}, state)创建了一个浅层副本，data及其所有rec个对象与前一个状态对象共享。如果您指定其中一个，则会改变旧状态。

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

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

在react-redux reducer中出错意外

1 个答案: