Обновление отдельного элемента состояния Redux с указанием предыдущей версии

Question

Мой редуктор обновлений для моих элементов (icdCode) в моем массиве (icdCodes) не обновляется должным образом в компоненте реагирования (пока я не перезагружу весь компонент). Сначала он давал проблему с дублирующимся ключом, потому что недавно обновленный элемент в массиве обнаруживался вместе с предыдущим элементом состояния в моем компоненте списка после запуска действия. Я нашел обходной путь для этого с некоторыми изменениями, но независимо от того, что еще я пробовал, я не могу должным образом обновить этот элемент в интерфейсе.

Исходное состояние:

state = {icdCodes: []}

Обновление редуктора:

case UPDATE_ICD_CODE:
return {
        ...state,
        icdCodes: [...state.icdCodes, action.payload]
}

Вот выдержка из моего компонента реакции, загружающего список этих элементов массива (с помощью сопоставления):

  render() {
    const { icdCodes } = this.props.icdCode;

    return (
      <Card body>
        <ListGroup flush>
              <Row>
                this.icdCodes.map(({ _id, icdCode, icdCodeValue }) => (
                <div>{icdCodeValue}</div>
                )
              </Row>
        </ListGroup>
      </Card>
    );
  }
}

IcdCodeItem.propTypes = {
  getIcdCodes: PropTypes.func.isRequired,
  icdCode: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  icdCode: state.icdCode
});

export default connect(
  mapStateToProps,
  { getIcdCodes, deleteIcdCode, updateIcdCode }
)(IcdCodeItem);

Вот что возвращает action.payload (обновленный элемент icdCode с новым значением вместо раздела «icdCode»):

{icdCodeVersion: "10", 
_id: "5b922fbae1c4241b54ea8aa4", 
icdCode: "I9", 
icdCodeValue: "jam jam", 
date: "2018-09-07T07:58:50.104Z", …}

Следующий код только частично решает проблему (позволяет мне редактировать только первый ключ (не элемент icdCode, а icdCode внутри элемента - извинения за ужасный синтаксис) моего объекта, а не всего объекта):

return {
        ...state,
        icdCodes: state.icdCodes.map(
          icdCode =>
            icdCode._id === action.payload._id
              ? { ...icdCode, icdCode: action.payload.icdCode }
              : icdCode
        )
      };

Answer 1

Вы можете отобразить массив icdCodes, тогда, если элемент правильный (здесь я проверяю _id), вы можете изменить его, не изменяя.

case UPDATE_ICD_CODE: {
  const icdCodes = state.icdCodes.map(icd => {
    if (icd._id === action.payload._id) {
      return { ...icd, icdCode: action.payload.icdCode };
    }
    return icd;
  });

  return { ...state, icdCodes };
}

** Обновление после комментариев**

Если вам нужно изменить более одного свойства, вот оно:

case UPDATE_ICD_CODE: {
  const { _id, icdCode, icdCodeValue } = action.payload;
  const icdCodes = state.icdCodes.map(icd => {
    if (icd._id === _id) {
      return { ...icd, icdCode, icdCodeValue };
    }
    return icd;
  });

  return { ...state, icdCodes };
}

Если вы хотите полностью изменить объект, это проще:

case UPDATE_ICD_CODE: {
    const { _id } = action.payload;
    const icdCodes = state.icdCodes.map(icd =>
        icd._id === _id ? action.payload : icd
    )

    return { ...state, icdCodes };
}