Object spread , new Redux state

Question

I have the following state object in redux:

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

I want to set the array employments new.

That's my redux reducer:

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;
  }
};

The action:

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

But my object looks like this after the reducer has been called:

console.log({

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

})

What is wrong here ?

if you were to dispatch `setEmployment` twice with A and then B, would you want the result to feature just B (i.e. `employments: ['B']`) or both A & B (`employments: ['A', 'B']`)? — obataku, Oct 10 '19 at 19:33

Mark Michon · Answer 1 · 2019-10-10T20:42:49.353

0

You're a level too deep (or not deep enough, depending on how you see it).

You need something like:


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

edited Oct 10 '19 at 20:42

answered Oct 10 '19 at 19:36

Mark Michon

725
5
7

If your state has more than just `filters` in it, you might want to consider breaking it up into multiple reducers. Also would be useful to see what employments before and after looks like, along with what employment looks like in that scenario. Either way, the concept is the same: return spreaded state, override target key, spread substate, override target key, etc. – Mark Michon Oct 10 '19 at 20:44

xandermonkey · Answer 2 · 2019-10-11T17:43:58.087

0

Similar to Mark's answer, all one line if you like.

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;
  }
};

edited Oct 11 '19 at 17:43

answered Oct 10 '19 at 19:40

xandermonkey

4,054
2
31
53

Gives a syntax error. That state.filters does not work in this way – Gutelaunetyp Oct 10 '19 at 19:45
@Gutelaunetyp updated, it's hard to properly answer because you don't have interfaces and types defined but I think this should do it – xandermonkey Oct 11 '19 at 17:44

score 0 · Answer 3 · answered Oct 12 '19 at 05:54

Finally got it myself. Answer is:

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

Object spread , new Redux state

3 Answers3