Распространение объектов, новое состояние Redux

Question

У меня есть следующий объект состояния в редуксе:

console.log({
  jobOffers: {
    filters: {
      employments: [],
      careerLevels: [],
      jobTypeProfiles: [],
      cities: [],
      countries: [],
      searchTerm: '',
      currentPage: 1,
      pageSize: 5
    }
  }
});

Я хочу установить новые массивы.

Это мой редуктор:

export const reducer = (state = initialStateData, action) => {
  switch (action.type) {
    case Action.SET_ARR_FILTER:
      {
        const newNestedState = {

          ...state[action.key],
          [action.key]: action.value,
        };
        return { ...state,
          [action.key]: newNestedState
        };
      }
    default:
      return state;
  }
};

Акция:

export const SET_ARR_FILTER = 'SET_ARR_FILTER';
export const setEmployment = employment => ({
  type: SET_ARR_FILTER,
  key: 'employments',
  value: employment,
});

Но мой объект выглядит так после вызова редуктора:

console.log({

  employments: {
    employments: ['HelloWorld']
  },

})

Что здесь не так?

Answer 1

Аналогично ответу Марка, если хотите, все в одну строку.

export const reducer = (state = initialStateData, action) => {
  switch (action.type) {
    case Action.SET_ARR_FILTER:
      return {
          ...state,
          filter: {
                  ...state.filter,
                  [action.key]: action.value
              }
      }
    default:
      return state;
  }
};

Answer 2

Наконец-то получил это сам. Ответ:

case Action.SET_ARR_FILTER:
  {
    return {
      ...state,
      jobOffers: {
        ...state.jobOffers,
        filters: { ...state.jobOffers.filters,
          [action.key]: action.value
        },
      },
    };
  }

Answer 3

Вы уровень слишком глубокий (или недостаточно глубокий, в зависимости от того, как вы его видите).

Вам нужно что-то вроде:

case Action.SET_ARR_FILTER:
      {
        const { filters } = state
        return { ...state,
          filters: {
            ...filters,
            [action.key]: action.value 
          }
        };
      }