How do I update the state on an object without changing the properties that do not have a new value?

Question

I have this reducer.

case UPDATE_ENDPOINT:
  return <IState>state.map(endpoint =>
    endpoint.ocid === action.endpoint.ocid
      ? { 
        ...endpoint, 
        name: action.endpoint.name,
        hostname: action.endpoint.hostname,
        origin: action.endpoint.origin,
        originType: action.endpoint.originType,
        originValidation: action.endpoint.originValidation,
      }
      : endpoint
  );

Say that in my action payload I only have endpoint.name and endpoint.hostname, then the reducer will set the values that are not passed in the payload to undefined. How do I do to have the reducer only update the values that are in the action payload, and leave the ones that are not in the action payload unchanged?

Answer 1

The easiest way would be to use object-spread syntax:

case UPDATE_ENDPOINT:
  return <IState>state.map(endpoint =>
    endpoint.ocid === action.endpoint.ocid
      ? { 
        ...endpoint, 
        ...action.endpoint
      }
      : endpoint
  );