Question

我正在尝试在Angular7 @ ngrx / effects环境中实现以下功能：

URL中有一个用户ID，我想从服务器（/api/users端点）接收到的用户数组中选择一个用户。我想用userService.getUsers进行API调用，完成后，我想从服务器接收的users数组中选择用户，并在URL中提供用户ID。

到目前为止，我已经了解了这一点，但是这个并没有为基于URL参数的用户选择分配操作，而是为设置所有帐户分配了操作。

  @Effect()
  loadUsers$ = this.actions$.pipe(
    ofType(userActions.LOAD_USERS),
    switchMap(() => this.userService.getUsers().pipe(
      map((accounts: UserAccount[]) => new LoadUsersSuccessAction(accounts),
      catchError(() => of(new LoadUsersFailAction()))
    ))
  ));

我如何等待URL参数更改并使用

调度2个操作

a）帐户已加载（LoadUsersSuccessAction）和

b）基于URL参数（例如/users/{id}）从服务器（SelectUserAction）接收的用户中选择一个用户？

编辑

我很确定我必须使用combineLatest运算符，但不确定如何使用。

Answer 1

我可以通过以下表达式来实现与之相关的行为：

  @Effect()
  loadAccounts$ = this.actions$.pipe(
    ofType(partnerActions.LOAD_ACCOUNTS),
    switchMap(() =>
      combineLatest(this.partnerService.getAccounts(), of(this.route.firstChild),
        (accounts: UserAccount[], url) => {
          const userId = url.snapshot.params.userId;
          const user = accounts.find(acc => +acc.id === +userId);
          return {
            accounts,
            user
          };
        }
      ).pipe(
        switchMap(({accounts, user}) => [new LoadAccountsSuccessAction(accounts), new SelectAccountAction(user)]),
        catchError(() => of(new LoadAccountsFailAction()))
      )
    ));

Angular7 RXJS @ ngrx /影响选择用户进行路线更改

1 个答案: