Эффективный способ добавить элемент массива в ключ объекта

Question

У меня есть одно значение с сервера. Он содержит объект с тем же ключом, что и в моем объекте состояния. Значением ключа этого объекта является массив с одним элементом. Чтобы обработать это значение в моем редукторе, мне нужно добавить этот элемент массива в существующий ключ объекта в моем состоянии.

Короче говоря:

У меня с сервера: { TEST: ['item1'] }

Мое состояние: { TEST: ['item2'], TEST2: ['item3'] }

Ожидаемый результат: { TEST: ['item1', 'item2'], TEST2: ['item3'] }

const handleCreateItemFilter = (state, { payload }) => {
  const { list  } = payload;
  const updatedList = { ...state.regions.list };
  updatedList[Object.keys(list).join()] = [...updatedList[Object.keys(list).join()], Object.values(list).join()];
  return {
    ...state,
    regions: {
      ...state.regions,
      list: updatedList,
    },
    selectedFilter: {
      ...state.selectedFilter, unassignedCountries: [], regions: Object.keys(list).join(),
    },
  };
};

В настоящее время я решил эту проблему, как в примере выше: создайте новый updatedList, найдите соответствующий ключ для моего объекта на сервере и присвойте моему новому объекту массив старого значения ключа и нового. Но я думаю, что это плохой подход к решению этой проблемы.

Answer 1

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

const response = { TEST: ['item1'] }
const stateInitial = { TEST: ['item2'], TEST2: ['item3']}

const expected = JSON.stringify({ TEST: ['item1', 'item2'], TEST2: ['item3']})

const reducer = (state = stateInitial, { payload }) => {
  return [
    ...Object.entries(payload).map(([k, v]) => (
      typeof stateInitial[k] !== 'undefined' ?
      [ k,[...v, ...stateInitial[k],]] :
      [k, v]
    ))

  ].reduce((obj, [k, v]) => ({ ...obj, [k]: v }), stateInitial)
};


try {
  const output = JSON.stringify(reducer(undefined, { payload: response}))
  if (output != expected) {
    throw `reducer return something different: \n${output} \n\nand expect \n\n${expected}`
  }

  console.log('the test is passed')
} catch (error) {
  console.error(error)
}