使用 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 实体的更新类型对象。

我有一个在更新时触发的效果设置，一旦返回服务器的响应，我正在尝试调用 "updated" 操作

 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 时出现问题，它需要更新类型的对象，以便它可以在适配器（在减速器中）上调用 "updateOne" 但此时我没有掌握行动。我如何使用更新对象调用 BankManagerActions.bankAccountUpdated？

Answer 1

您应该将 map 运算符移到 updateAccount 可观察管道中：

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。

使用 ngrx 实体的悲观更新

pessimistic update using ngrx entity

rxjs

ngrx

ngrx-effects

angular

ngrx-entity