調度動作時的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); 和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);

這是因為{...}對象傳播運算符會執行淺表副本，而不是深表副本。 這是一個非常普遍的錯誤 。

我個人建議分派如下所示的操作：

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

然后使用化簡器進行所有更新。

另外，如果您使用的是Redux入門工具包，則可以使用我們的createReducer()函數在實際上執行不可變更新的reducer中編寫“可變”代碼 。