使用 ngrx 实体的悲观更新答案

【问题标题】：pessimistic update using ngrx entity使用 ngrx 实体的悲观更新
【发布时间】：2020-09-25 15:34:06
【问题描述】：

我的动作设置是这样的

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

【问题讨论】：

标签： angular rxjs ngrx ngrx-effects ngrx-entity

【解决方案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。

【讨论】：