angular - 带过滤器的 ngrx 选择器

Question

我在 Angular 应用程序中使用 @ngrx，我想抽象出我已经拥有的一种循环模式。

我的状态通常由许多这样的状态组成:

myState: {
  data: any
  isLoading: boolean
  isLoaded: boolean
}

所以我最终在代码中做的是订阅它，但我只想在状态已加载时收到通知。

this.store
  .select(state => state.myState)
  .filter(myState => myState.isLoaded)
  .map(myState => myState.data)
  .do(data => do_whatever_I_need_to_do)
  .subscribe();

这对我有用，但我想知道我是否可以简化前 3 个运算符，因为它们经常出现。

通过使用选择器我可以创建这样的东西

const selectMyState = (state) => state.myState;

export const getData = createSelector(selectMyState, state => state.data)

然后像这样使用它

this.store
  .select(getData)
  .do(data => do_whatever_I_need_to_do)
  .subscribe();

但是我缺少过滤器部分，因此即使我的数据尚未加载，我也可能会从中获取流事件。

有什么方法可以将缺失的过滤器包含到可观察对象中吗？我知道 createSelector 有一个函数作为参数，因此我可以在其中编写一些代码，但我不确定如何使用它来过滤事件本身而不是数据。

有什么想法吗？谢谢!

Answer 1

例子来自ngrx.io

假设您有 selectValues 选择器并且您想要过滤值以使代码可重用。

import { select } from '@ngrx/store';
import { pipe } from 'rxjs';
import { filter } from 'rxjs/operators';

export const selectFilteredValues = pipe(
 select(selectValues),
 filter(val => val !== undefined)
);

store.pipe(selectFilteredValues).subscribe(/* .. */);