Используйте переменную в качестве ключа объекта в редукторе

Question

У меня проблемы с созданием объекта. У меня есть строка (для этого примера называется "SKU"), и она идет через action как action.name,

У меня есть все, что доступно в функции редуктора, но мне нужно поменять жестко SKU к action.name, но, очевидно, это невозможно в JS. я пробовал action.name, action['name'] и другие варианты и я застрял.

Что обходится? Любая помощь приветствуется! Благодарю.

Вот некоторый код, чтобы вы могли видеть, что происходит:

функция, которая срабатывает при изменении даты...

handleChange(date) {
  this.props.addDate(date, this.props.dashboardName);
}

mapDispatch, который связан в нижней части компонента экспорта...

const mapDispatchToProps = dispatch => {
  return {
    addDate: (date, name) => dispatch({
      type: 'ACTION_DASHBOARD_ADD_DATE',
      date,
      name
    })
  };
};

создатель действия...

export function DashboardDate() {
  return {
    type: ACTION_DASHBOARD_ADD_DATE
  };
}

корпус в переключателе редуктора...

case ACTION_DASHBOARD_ADD_DATE: {
      var filter = {};
      filter[action.name] = action.date;
      return {
        ...state,
        dashboard: {
          ...state.dashboard,
          // Below SKU needs to be the value of action.name
          SKU: {
            // Below too, action.name
            ...state.dashboard.SKU,
            filter
          }
        }
      };
    }

Answer 1

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

const obj = {
    [action.name]: action.payload
};

console.log(obj); // { "sku": "abcd" }

Вычисленные имена свойств являются функцией ES2015 (ES6).

Answer 2

Используйте [action.name] (синтаксис для вычисляемого ключа)

case ACTION_DASHBOARD_ADD_DATE: {
  var filter = {};
  filter[action.name] = action.date;
  return {
    ...state,
    dashboard: {
      ...state.dashboard,
      [action.name]: {
        ...state.dashboard.SKU,
        filter
      }
    }
  };
}