NgRx RxJS 提取和重用公共选择器

Question

我正在尝试找到一种重用结合了多个特征选择器的 RxJS Observable 的方法：

// auth.selectors.ts
export const selectAuthState
  = createFeatureSelector<AuthState>('auth');

export const selectCurrentUser = createSelector(
  selectAuthState,
  (state) => {
    return state.auth
  }
)

// foo.selectors.ts
export const selectFoosState
  = createFeatureSelector<FoosState>('foo');

export const selectAllFoos = createSelector(
  selectFoosState,
  selectAll
)

// foo.component.ts
class FooComponent {
  constructor(private store: Store) {
    this.currentUser$ = this.store.pipe(select(selectCurrentUser));
    this.availableFoos$ = this.store.pipe(select(selectAllFoos));

    // GOAL is to reuse this observable in multiple components
    this.accountIsPendingReviewMsg$ = combineLatest(
      this.currentUser$,
      this.availableFoos$
    ).pipe(
      map(([user, foos]) => {
        return user && user.role === 'user' && foos.length === 0
      })
    )
  }
}

可能吗？不确定如何在提取的函数中注入 this.store。

我想知道是否可以只使用 NgRx+RxJs 来完成，可能是一些惯用的解决方案来解决看起来很常见的任务。替代解决方案可能涉及使用装饰器和 Angular 注入器，但我想尽可能避免使用它。

Answer 1

您可以简单地在两个可用选择器之上创建一个组合选择器，如下所示，并在任何地方使用“accountPendingSelector”选择器。

    // auth.selectors.ts
export const selectAuthState
  = createFeatureSelector<AuthState>('auth');

export const selectCurrentUser = createSelector(
  selectAuthState,
  (state) => state.AuthState
)

// foo.selectors.ts
export const selectFoosState
  = createFeatureSelector<FoosState>('foo');

export const selectAllFoos = createSelector(
  selectFoosState,
  selectAll
);


export const accountPendingSelector = createSelector(selectCurrentUser, selectAllFoos, (user, foos) => {
  return user && user.role === 'user' && foos.length === 0;
});

NgRx RxJS 提取和重用公共选择器

NgRx RxJS Extract and reuse common selector

angular

rxjs

ngrx

ngrx-store