NGRX复用Selector Pipe报错：提供函数而非预期流的问题求助

这个错误的根源其实很好找——你在抽离复用逻辑的时候，误用了NgRx的select操作符，导致给withLatestFrom传了一个函数而非它需要的Observable流。

具体来说：在你原本的组件代码里，withLatestFrom接收的是this.store.select(fromBookmarks.selectCurrentBookmarks)，这是一个合法的Observable；但抽离后你写成了select(selectCurrentBookmarks)，这个select()调用返回的是NgRx的操作符函数，不是Observable，这就触发了报错里的"You provided 'function...' where a stream was expected"。

下面给你两种可行的解决方式：

方法1：自定义RxJS操作符（兼容所有NgRx版本） #

我们可以把复用逻辑封装成一个接收Store实例的工厂函数，确保能正确获取到bookmarks的Observable：

// bookmarks.selectors.ts
import { Store, select } from '@ngrx/store';
import { pipe, filter, withLatestFrom, map } from 'rxjs';
import * as fromBookmarks from './bookmarks.reducer';

export const selectBookmarksAfterLoad = (store: Store) => pipe(
  // 从store状态流中提取loading状态
  map(state => fromBookmarks.selectBookmarksLoading(state)),
  // 等待loading结束
  filter(loading => !loading),
  // 获取最新的bookmarks数据
  withLatestFrom(store.select(fromBookmarks.selectCurrentBookmarks)),
  // 只保留bookmarks结果
  map(([_, bookmarks]) => bookmarks)
);

组件中使用方式：

this.bookmarks$ = this.store.pipe(fromBookmarks.selectBookmarksAfterLoad(this.store));

方法2：使用NgRx的waitFor选择器（NgRx 14+推荐） #

如果你的项目使用NgRx 14及以上版本，推荐用官方提供的waitFor工具函数，代码更简洁也更符合NgRx最佳实践：

// bookmarks.selectors.ts
import { createSelector, waitFor } from '@ngrx/store';
import * as fromBookmarks from './bookmarks.reducer';

export const selectBookmarksAfterLoad = createSelector(
  // 自动等待loading状态变为false
  waitFor(fromBookmarks.selectBookmarksLoading, (loading) => !loading),
  // 获取当前的bookmarks数据
  fromBookmarks.selectCurrentBookmarks,
  // 返回最终需要的bookmarks结果
  (_, bookmarks) => bookmarks
);

组件中使用方式：

this.bookmarks$ = this.store.pipe(select(fromBookmarks.selectBookmarksAfterLoad));

这种方式不需要手动处理Observable流，NgRx会自动帮你等待loading结束后再返回数据，维护成本更低。

内容的提问来源于stack exchange，提问作者The.Wolfgang.Grimmer