调度操作时的 Redux 状态变化

Question

我有一张这样的桌子

当您使用此 onChange 编辑数量时

onChange={this.handleInputChange.bind(null, cellInfo)}

我运行下面的代码

handleInputChange = (cellInfo, event) => {
    let data = { ...this.props.Data };
    data[cellInfo.index][cellInfo.column.id] = parseInt(event.target.value);
    this.props.APISummaryData(data);
  };

目标是首先获取存储中的数据，然后反映您更改的值，然后使用操作更新它 this.props.APISummaryData(data); 和 this.props.APISummaryData({ ...data }); 都给出相同的状态突变错误。

这是减速器

case types.API_SUMMARY_DATA:
    return {
        ...state,
        Summary: {
            ...state.Summary,
            Data: action.Summary
    }
};

如果我在 DevTools 中手动调度 Redux 中的操作

{
  type: 'API_SUMMARY_DATA',
  Summary: [
    {
      cusip: '019I',
      quantity: 55,
    }
  ]
}

这是动作

export const APISummaryData = Summary => ({ type: types.API_SUMMARY_DATA, Summary });

我没有收到任何错误，并且数据已更新。我很困惑在这个方案中我在哪里改变了状态？

注意：我可能没有分享一些重要的代码，请看这里，所以请告诉我，我会分享。

准确的错误

Answer 1

我假设您使用的是 Redux Starter Kit 中的 configureStore()，它默认设置了一个突变检查中间件。好的！这意味着突变检查器正在正确地完成它的工作。

这里的这些行正在变异：

    let data = { ...this.props.Data };
    data[cellInfo.index][cellInfo.column.id] = parseInt(event.target.value);

这是因为{...} 对象扩展运算符执行浅 复制，而不是深复制。 This is a very common mistake。

我个人建议调度如下所示的操作：

{type: "API_SUMMARY_DATA", payload: {index, columnId, inputValue}}

然后使用reducer进行所有更新。

另外，如果您使用 Redux Starter Kit，you can use our createReducer() function to write "mutative" code in the reducer that actually does immutable updates。