reactjs - Redux change a reducer of type object

Question

So I have the following reducer

const objectType = (state = {type: 0, image:defaultImage, moreOptions: {tap: 0, griff: 0} },
    action) => {....

case 'CHANG_OPTIONS':
      return state = {...state, moreOptions: {tap:action.tap, griff: action.griff}}

This is the action, so I get a dynamic category and assign the id of the product.

export const changeOptions = (category, id) => {
    return {
        type: 'CHANG_OPTIONS',
        [category]: id,
    }
}

An example of dispatch would be

dispatch(changeOptions('tap', 0))

Now whenever I click on a tap or a griff, my object remove the other category from the list.

Here is a screenshot from the Redux Debugger tool

I'm sure that the problem is in my reducer: moreOptions: {tap:action.tap, griff: action.griff} Is there a way I can spread the object and update only the one that was changed?

question from:https://stackoverflow.com/questions/65857577/redux-change-a-reducer-of-type-object

Answer 1

It's because you're overwritting both tap and griff value regardless of their input value. Try below.

const newOptions = {};
if (action.tap) {
  newOptions.tap = action.tap;
}
if (action.griff) {
  newOptions.griff = action.griff;
}
return (state = {
  ...state,
  moreOptions: {
    ...state.moreOptions,
    ...newOptions
  }
});