angular - 如何在 NgRx 中选择多个状态

Question

@Injectable()
export class UsersResolver implements Resolve<any> {

loading = false;

constructor(private store: Store<AppState>) { }
resolve(route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<any> {
    return this.store
    .pipe(
      select(isUserLoaded),
      tap(userLoaded => {
        if (!this.loading && !userLoaded) {
          this.loading = true;
          this.store.dispatch(loadingUsers({
            pagination: {} // **Here i want to get my pagination details from selectUserPagination state**
          }));
        }
      }),
      filter(userLoaded => userLoaded), // only proceed further only in case of coursesLoaded is true
      first(), // Wait for first observable to get values or error
      finalize(() => this.loading = false) // Runs in last
  );
 }
}

所以想选择我的 userPagination 状态并将其分派到 loadingUsers 操作中。

如何将多个选择添加到此解析器中，然后分派该操作？

Answer 1

您可以使用withLatestFrom来获取您的状态的另一部分：

resolve(route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<any> {
    return this.store
    .pipe(
      select(isUserLoaded),
      withLatestFrom(this.store.pipe(select(selectUserPagination))), //New Added
      tap(([userLoaded, pagination]) => {
        if (!this.loading && !userLoaded) {
          this.loading = true;
          this.store.dispatch(loadingUsers({
            pagination: pagination // **Here i want to get my pagination details from selectUserPagination state**
          }));
        }
      }),
      filter(userLoaded => userLoaded[0]), // only proceed further only in case of coursesLoaded is true
      first(), // Wait for first observable to get values or error
      finalize(() => this.loading = false) // Runs in last
  );
 }
}

https://www.learnrxjs.io/operators/combination/withlatestfrom.html

Answer 2

与LatestFrom一起使用

withLatestFrom(
        this.store.pipe(select(fromRoot.selectLocationName)),
        this.store.pipe(select(fromRoot.selectLocationCode))
      ),
switchMap(([action, name, code]) => {
// do stuff
})

Answer 3

你可以试试combineLatest

combineLatest(
 this.store.pipe(select(data1)),
 this.store.pipe(select(data2)),
).pipe(tap(([list1, list2]) => console.log(list1, list2)))