使用 ngrx 實體的悲觀更新

Question

我有這樣的動作設置

    export const bankAccountUpdating = createAction(
  '[Create New Account Component] Account Updating',
  props<{ update: Update<BankAccount> }>()
);

export const bankAccountUpdated = createAction(
  '[Bank Manager Effect] Account Updated',
  props<{ update: Update<BankAccount> }>()
);

export const updateAccountError = createAction(
  '[Bank Manager Effect] Update Accounts Error'
);

減速器是這樣設置的

 export const initialBankAccountsState = adapter.getInitialState({
  allBankAccountsLoaded: false,
});

export const bankManagerReducer = createReducer(
  initialBankAccountsState,

  on(BankManagerActions.bankAccountUpdated, (state, action) =>
    adapter.updateOne(action.update, state)
  ),

請注意，adapter.updateOne 需要來自 ngrx 實體的 Update 類型的 object。

我有一個在更新時觸發的效果設置，一旦返回服務器的響應，我就會嘗試調用“更新”操作

 updateAccount$ = createEffect(
() =>
  this.actions$.pipe(
    ofType(BankManagerActions.bankAccountUpdating),
    concatMap((action) =>
      this.bankManagerHttpService
        .updateAccount(action.update.id, action.update.changes)
        .pipe(
          catchError((err) => {
            console.log(err);
            this.store.dispatch(BankManagerActions.updateAccountError());
            return of();
          })
        )
    ),
    map((account) => BankManagerActions.bankAccountUpdated({ account }))) //<--PROBLEM
   // ,{ dispatch: false }  );

當我試圖調用 BankManagerActions.bankAccountUpdated 時，問題就在這里，它需要更新類型的 object 以便它可以在適配器（在減速器中）調用“updateOne”，但此時我沒有采取行動。 如何使用更新 object 調用 BankManagerActions.bankAccountUpdated？

Answer 1

您應該將map運算符移動到可觀察到的updateAccount pipe 中：

updateAccount$ = createEffect(() =>
  this.actions$.pipe(
    ofType(BankManagerActions.bankAccountUpdating),
    concatMap((action) =>
      this.bankManagerHttpService
        .updateAccount(action.update.id, action.update.changes)
        .pipe(
           map(account => BankManagerActions.bankAccountUpdated({update: {id: action.update.id, changes: account}})), // action here
           catchError((err) => {
            console.log(err);

            return of(BankManagerActions.updateAccountError());
          })
        )
    ),
);

我也刪除了{dispatch: false}和store.dispatch 。