Update Multiple Properties of an object with spread operator

Question

I have a state in a reducer that looks like this:

// The current source/selection
const selection = {
  timespan: "-3660",
  customTimespan: false,
  pathIds: [''],
  source: undefined,
  direction: 0,
  appClassIds: []
};

What I want now is to update multiple properties (timespan and customTimeSpan), something like this (but this doesn't work):

{ ...state, 
  {
      timespan: action.timespan.value,
      customTimespan: action.timespan.value
  } 
};

How can I update multiple properties of a state?

Answer 1

You need to remove the extra object closure from there

{ ...state, 
 timespan: action.timespan.value, 
 customTimespan: action.timespan.value
}

should work fine

If you wanted to do it in vanilla JS you could do this:

Object.assign({}, state, { timespan: action.timespan.value, customTimespan: action.timespan.value})

I think the spread operator is much cleaner and should go that route if you have access to it.

Answer 2

You can also achieve the same using the spread operator which allows you to have the new values in an object, instead of having to hardcode them:

const selection = {
  timespan: "-3660",
  customTimespan: false,
  pathIds: [""],
  source: undefined,
  direction: 0,
  appClassIds: []
};

const newSelectionValues = {
  timespan: "-3600",
  customTimespan: true
};

const newSelection = { ...selection, ...newSelectionValues };