带有过滤器的 ngrx createSelector

如何解决带有过滤器的 ngrx createSelector

我有一个选择器可以获取当前选定的项目：

const getSelectedItem = createSelector(
  getItemId,getItemsById,(itemId: string,itemsById: Record<string,Item>) => itemsById[itemId],);

这有效，但我多次使用它，并且在订阅组件时必须应用 filter 运算符，因此底层函数不会尝试使用尚不存在的项目：

this.store.select(getSelectedItem).pipe(filter(Boolean)).subscribe((item: Item) => {
  // fetch reviews,etc.
  this.store.dispatch(fetchItemReviews({ item }));
});

但我有许多组件依赖于相同的逻辑。如何将 filter(Boolean) 封装在我的 getSelectedItem 中？这是我最接近的，但有时它仍然发出 false:

getSelectedItem = createSelector(
  getItemId,Item>) => !!itemsById[itemId] && itemsById[itemId],);

只是在投影仪功能后标记filter(Boolean)也不起作用：

getSelectedItem = createSelector(
  getItemId,filter(Boolean),);

解决方法

我发现了一些有效的方法：

getSelectedItemRaw = createSelector(
  getItemId,getItemsById,(itemId: string,itemsById: Record<string,Item>) => itemsById[itemId],);

getSelectedItem = createSelector(
  select(state => getSelectedItemRaw(state)),filter<Item>(Boolean),);

getSelectedItem 的类型是 MemoizedSelector<Observable<State>,Observable<Item>>，因此需要在效果/组件中与 this.store.pipe(getSelectedItem) 一起使用。坏消息是测试很麻烦，我只能通过设置getSelectedItemRaw的值

来测试