Мутация состояния 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
    }
};

Если я вручную отправлю действие в Redux внутри DevTools, сделав

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

Это действие

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

Я не получаю никакой ошибки, и данные обновляются. Я так озадачен, где в этой схеме я изменяю состояние?

Примечание: возможно, я не делюсь каким-то кодом, который важно посмотреть здесь, поэтому, пожалуйста, дайте мне знать, и я поделюсь им.

точная ошибка

Answer 1

Я предполагаю, что вы используете configureStore() из Redux Starter Kit, который по умолчанию устанавливает промежуточное ПО для проверки мутаций.Хорошо!Это означает, что средство проверки мутаций выполняет свою работу правильно.

Эти строки прямо здесь изменяются:

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

Это потому, что оператор распространения объекта {...} делает поверхностный копия, а не глубокая копия. Это очень распространенная ошибка .

Я лично рекомендовал бы отправить действие, которое выглядит следующим образом:

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

, а затем использовать редуктор для выполнения всех обновлений.

Также, если вы используете Redux Starter Kit, , вы можете использовать нашу функцию createReducer() для записи «мутативного» кода в редуктор, который фактически выполняет неизменяемые обновления .