在嵌套的 object Angular 中更新 ngrx state

Question

我可以在我的應用程序中更新嵌套在另一個 object 中的 object，但我遇到了一些問題。 假設我要更新的實體是這樣的：

{
  {
  "id": 0,
  "name": "Yellow Car",
  "details": {
    "engine": {},
    "ownerInfo": {
      "name": "Luke",
      "lastName": "Cage",
      "email": "l.cage@hisemail.blabla"
    },
  },
  "created": "2018-01-17",
  "lastUpdate": "2020-09-03",
}

我可以通過這種方式輕松更新該實體的某些部分：

let car: Car = {
   ...car,
   ...this.form.value
};

let carUpdate: Update<Car> = {
  id: car.id,
  changes: car
};

this.store.dispatch(carUpdated({carUpdate}));

但是這樣我只能更新name, created, lastUpdate而不能更新嵌套的 object details 。 如果我現在嘗試編輯detail object 會發生什么？ 我不想發生任何事情。

這是選擇器：

export const carUpdated = createAction(
    "[Edit Car] Car Updated",
    props<{carUpdate: Update<Car>}>()
);

效果：

 saveCar$ = createEffect(
        () => this.actions$
        .pipe(
            ofType(CarActions.carUpdated),
            concatMap(action => this.carService.editCar(
                action.carUpdate.changes,
                action.carUpdate.id
            ))
        ),
        {dispatch: false}
    )

減速機：

on(CarActions.carUpdated, (state, action) =>
    adapter.updateOne(action.carUpdate, state)),

該服務將正確的數據發送到后端，並且在沒有 state 管理的情況下運行良好。 我現在正在做的是在 ngOnInit 的組件中以這種方式檢索單個ngOnInit

car$ = this.store.pipe(
   select(selectCar(id))
)

選擇器是：

export const selectCar = (id) => createSelector(
    selectAllCars,
    (cars: any) => cars.filter((car) => {
        let filteredCar = car.id == id;
        if(filteredCar) {
            return car;
        }
    }).map(car => car)
);

然后在我編輯之后，我可以使用調度來確認我的編輯

this.store.dispatch(carUpdated({carUpdate}));

但正如我所說，如果我嘗試更新細節 object 我有這個

let car: Car = {
       ...car, // the entire car object
       ...this.form.value // only the details
    };
    
    let carUpdate: Update<Car> = {
      id: car.id,
      changes: car //the details are mixed with the car object and not inside the object itself
    };

像這樣的東西：

{
  "id": 0,
  "name": "Yellow Car",
  "engine": {},
  "details": {
  },
  "ownerInfo": {
    "name": "Luke",
    "lastName": "Cage",
    "email": "l.cage@hisemail.blabla"
  },
  "created": "2018-01-17",
  "lastUpdate": "2020-09-03",
}

有沒有簡單的方法來解決這個問題？

Answer 1

我將嘗試提供一個一般性答案，該答案可能會展示如何用另一個 object 更新一個 object 的技術。

如果在表格中，您只有更新的details （更新是Partial<Car["details"]> ，您可以這樣做：

const update: Partial<Car["details"]> = this.form.value;
const newCar: Car = {
   ...oldCar,
   details: {
      ...oldCar.details,
      ...update
   }

然后有可能更新是（部分）帶有部分details的Car ：

const update: Partial<Car> & { details: Partial<Car["details"]> } = this.form.value;

const newCar: Car = {
   ...oldCar,
   ...update,
   details: {
      ...oldCar.details,
      ...update.details
   }
}

一個不太可能的選擇是您在更新中混合了細節和汽車屬性（無論出於何種原因 - 您可能做錯了什么）。 然后你可以手動挑選它們。 請注意，如果未定義新值，這將刪除舊值。

const update: Pick<Car, 'name' | 'lastUpdate'> & Pick<Car["details"], 'ownerInfo'> = this.form.value;

const newCar: Car = {
   ...oldCar,
   name: update.name,
   lastUpdate: update.lastUpdate,
   name: update.name
   details: {
      ...oldCar.details,
      ownerInfo: details.ownerInfo
   }
}