ngrx 选择器等待条件直到发出值

Question

我想创建一个 ngrx

selector

selectResult$

，它仅在某个输入可观察量具有特定值时才发出值。

让我们举个例子：

export interface AppState {
  data: string[];
  settings: string[];
  loading: boolean; 
}

@Injectable()
export class AppStore extends ComponentStore<AppState> {

   selectLoading$ = this.select((state) => state.loading);
   selectSettings$ = this.select((state) => state.settings);
   selectData$ = this.select((state) => state.data);
   
   selectResult$ = this.select(
     this.selectLoading$.pipe(filter((loading) => loading === false)),
     this.selectSettings$,
     this.selectData$,
     (loading, settings, data) => {
        console.log('emit new data');
        return { loading, data, settings };
     }
);       

所以，我希望选择器仅在

selectLoading$

处于

loading = false

状态时发出值。

但是我无法让

selectResult$

正常工作。流程是这样的：

1. 最初，

   loading = false

2. 我设置了

   loading = true

3. 我将数据设置为

   selectData$

4. 选择器

   selectResult$

   立即发出一个值。但我没想到会这样，因为有这个

   filter(loading => loading === false)

   运算符

Answer 1

过滤器运算符（loading === false）仅适用于 selectloading$。 即使loading === true， selectSettings$ 和 selectData$ 仍然可以发出。 这意味着，您必须过滤合并的结果。

this.selectResult$ = this.select(
  this.selectLoading$,
  this.selectSettings$,
  this.selectData$
).pipe(
  filter( (loading) => loading === false ), 
  map( (loading, settings, data) => ({ loading, data, settings }) ),
  tap( () => console.log('emit new data') ) 
);

顺便说一句：使用 tap 来实现日志记录等副作用