'Problems achieving required result of using the spread (...) operator with state object

I have a pimRegistration state initialization as shown in the chrome redux-devtools screen capture below. The nesting being referenced is pimRegistration (state.domain.patient):

enter image description here

I updated the patient.name object with the following spread operator statement:

store.update((state) => ({
  ...state,
  ...patientPath,
  ...{ [property]: value },
}));

...where property is the "name" property of the patient object with value. After the update, the following screenshot shows the new state:

New updated state - yellow colour in screenshot

Note that the original patient object (purple in the screenshot) is updated with the name object, duplicated and placed at the root of the state (yellow in screenshot).

I would like to overwrite the properties of the pimRegistration(state).domain.patient object, not to create a new patient object.

The state update is called as shown below.

store.update((state) => ({
  ...state,
  ...patientPath, // state.domain.patient
  ...{ [property]: value },
}));

I have tried my different combinations without achieving the desired result.


The complete update function is shown below.

update(property: string, path: string, value: any) {
  const paths: string[] = path.split(".");

  const pathReducer = (state: IRegistrationState, path_: string) => {
    if (paths.length <= 0) {
      return state.domain;
    }
    return state[path_];
  };

  const domainPath = state.domain;
  let patientPath, nokPath, referrerPath;

  if (path.includes("patient")) {
    patientPath = paths.reduce(pathReducer, state);
  }

  if (path.includes("nok")) {
    nokPath = paths.reduce(pathReducer, state);
  }

  if (path.includes("referrer")) {
    referrerPath = paths.reduce(pathReducer, state);
  }

  store.update((state) => ({
    ...state,
    ...patientPath,
    ...{ [property]: value },
  }));
}

The function above is invoked with the following statement in Angular 2.

if (this.path.includes("patient")) {
  this._repo.update("name", "domain.patient", this.name);
}

Thanks



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source