Обновление состояния с помощью динамически созданного объекта с использованием редукторов в React

Question

У меня есть массив значений, которые установлены в состояние на логическое значение. Мне нужно перебрать массив и установить каждое значение в полезную нагрузку (true). Код ниже работает правильно, но я ищу способ достичь того же результата за произвольную сумму.

criticals = ["critical-1-524", "critical-4-572", "critical-15-24", "critical-30-48"]

return {
      ...state,
      mapboxToggleLayers: {
        ...state.mapboxToggleLayers,
        [criticals[0]]: action.payload,
        [criticals[1]]: action.payload,
        [criticals[2]]: action.payload,
        [criticals[3]]: action.payload
      }
    }

Вот моя рабочая версия, но она удаляет все значения в объекте состояния.

return {
  ...state,
  mapboxToggleLayers: {
    ...state.mapboxToggleLayers
    [criticals.map(el => {
      let critObj = {}
      return critObj[`${el}`] = action.payload
    })]
  }
}

Answer 1

Проблема в том, что criticals.map вернет массив. Исходя из вашего примера, кажется, что вам нужно динамически создать объект. Вы можете использовать reduce с оператором распространения:

return {
  ...state,
  mapboxToggleLayers: {
    ...state.mapboxToggleLayers,
    ...criticals.reduce((result, key) => {
      return {...result, [key]: action.payload}
    }, {})
  }
}