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的对象。

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

 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时，它需要类型为Update的对象，以便它可以在适配器上（在reducers中）调用“ updateOne”，但是此时我没有任何操作。如何使用Update对象调用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实体进行悲观更新

1 个答案: