javascript - 分派(dispatch)操作时 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);
  };

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

这是 reducer

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

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

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

这就是 Action

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 。

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

{类型:“API_SUMMARY_DATA”，负载:{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 。