Обновление свойства вложенного объекта в Redux с помощью действия

Question

Внутри моего редуктора мое начальное состояние имеет следующую структуру:

const initialState = {
    showOverlay: false,
    chosenAnimal: null,
    sliderValue: 0,
    colorValues: {
        a: null,
        c: null,
        g: null,
        t: null,
        bg: null
    }
};

Я пытаюсь обновить одно из colorValues свойств на основе action.type.

return {
    ...state,
    colorValues: {...state.colorValues, action.basePair: action.colorHex}
};

action.basePair выдает ошибку синтаксического анализа, из-за которой создается впечатление, что я не могу установить имя свойства динамически с помощью действия.Если я изменю, например, action.basePair на g, то произойдет ожидаемое поведение, и значение свойства g действительно обновится, как и ожидалось.

Но есть ли возможность сделать это так, чтобы я могустановить имя свойства динамически с помощью действия?Спасибо.

edit: код моего действия следующий:

const mapDispatchToProps = dispatch => {
  return {
    onSetColorValue: (basePair, colorHex) =>
      dispatch({ type: "SET_COLOR_VALUES", basePair: basePair, colorHex: colorHex })
  };
};

Answer 1

action.basePair выдает ошибку синтаксического анализа, из-за которой кажется, что Я не могу установить имя свойства динамически с помощью действия.

Wrap action.basePair до [action.basePair]

return {
    ...state,
    colorValues: {...state.colorValues, [action.basePair]: action.colorHex}
};

---

Кроме того, рекомендуется использовать клавишу payload для параметров действия

dispatch({ type: "SET_COLOR_VALUES", payload: { basePair, colorHex })

Редуктор

return {
    ...state,
    colorValues: {
      ...state.colorValues, [action.payload.basePair]: action.payload.colorHex
    }
};

Answer 2

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

return {
    ...state,
    colorValues: {
          ...state.colorValues, 
          [action.basePair]: action.colorHex
    }
};

Вы можете посетить ссылку ниже для более подробной информации: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors