Question

在 react-redux Reducer 中出现意外错误

2018-04-08

64

reactjs redux react-redux

我以为我已经安全地创建了一个新状态，并在我的 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        
  )
};