带过滤器的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有一个param函数，因此我可以在其中执行一些代码，但是我不确定如何用它来过滤数据而不是事件本身。

有任何想法吗？ 谢谢！

Answer 1

对于那种我想重用部分流的场景，我创建了一个函数，该函数接受存储作为参数并对它执行一些操作。 以下是一个示例：

const selectMyState = (state) => state.myState;
export const getData = createSelector(selectMyState, state => state.data)
export const getDataWhenLoaded = (store) => {
    return store.select(getData)
        .filter(myState => myState.isLoaded);
};
...
getDataWhenLoaded(this.store).subscribe(...);

至于使用createSelector函数的最后一个参数，则可以根据需要进行设置。 在文档中，它提到传递给createSelector创建的备注选择器的相同状态不会重新计算投影。 调用时它将返回相同的值。 我找不到有关此文档的文档，但是通过测试，我注意到，如果投影的结果与先前的值相同，那么如果订阅已接收到先前的值，则不会发出该投影。 与rxjs运算符distinctUntilChanged类似的行为。 我没有时间深入研究他们的源代码，以了解在哪里/如何/为什么。

因此，在某些情况下，您可以在createSelector的投影参数（最后一个）中放置一个过滤器。 这是一个例子：

export const getActive = createSelector(selectMyData, state => state.data.filter(x => x.isActive));

Answer 2

该示例来自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(/* .. */);