使用Nrwl DataPersistence Fetch操作符结合AngularFirestore stateChange()实现Firestore分页时，首次请求后后续动作无法触发run函数的问题

你遇到的这个问题，核心是Nx DataPersistence的fetch操作符默认行为和Firestore stateChanges()的特性之间的冲突，具体原因和解决思路如下：

为什么fetch操作符后续无法触发run函数？ #

fetch操作符默认配置了cancelPrevious: true，但它的内部逻辑是：如果当前存在一个未完成的run Observable，它会认为这个请求还在处理中，从而忽略后续的同类型Action。而Firestore的stateChanges()返回的是一个长期活跃的Observable——它会持续监听集合数据的变化，永远不会自动完成。这就导致第一次执行run后，这个Observable一直处于活跃状态，后续的Actions.query进来时，fetch会直接忽略，不会再触发run函数。

而switchMap的行为完全不同：每次新的Actions.query进来时，不管之前的Observable是否完成，它都会立即取消旧订阅、创建并订阅新的Observable，所以能正常触发后续的查询逻辑。

解决方案 #

根据你的业务需求，分两种场景处理：

场景1：仅需要单次分页数据获取（无需实时监听） #

如果你的分页需求只是获取指定批次的数据，不需要实时同步该页的后续变化，那应该修改后端服务的query函数，用单次快照获取替代实时监听：

public query(
  batchNumber = 1,
  batchSize = 40
): Observable<{ type: 'added'; payload: MyData; }> {
  return this.firestore
    .collection<MyData>(
      COLLECTION_ID,
      (ref: CollectionReference): Query => ref
        .where('available', '==', true)
        .where('active', '==', true)
        .orderBy('createdAt', 'desc')
        .limit(batchSize * batchNumber)
    )
    .get() // 改用get()获取单次数据快照，Observable会自动完成
    .pipe(
      logOperator('Service'),
      map((querySnapshot: QuerySnapshot<MyData>) => querySnapshot.docs),
      concatAll(),
      map((doc: QueryDocumentSnapshot<MyData>) => ({
        type: 'added' as const,
        payload: { ...doc.data(), id: doc.id }
      }))
    );
}

修改后，每次query返回的Observable会在获取数据后自动完成，fetch操作符就能正常识别请求结束，后续的Actions.query也能正常触发run函数。

场景2：需要实时监听分页数据的变化 #

如果确实需要持续监听当前分页数据的变化，同时支持后续的分页查询（比如加载下一页），那有两种选择：

选项A：继续使用fetch并调整配置

显式设置cancelPrevious: true（确保旧订阅被取消），同时修正run函数的返回类型（避免类型错误可能导致的隐性问题）：

query$ = createEffect(() => this.actions$.pipe(
  ofType(Actions.query),
  logOperator('Effect 1'),
  fetch({
    cancelPrevious: true, // 显式配置，确保新Action进来时取消旧订阅
    run: (action): Observable<Action> => { // 修正返回类型为Observable<Action>
      return this.backEndService.query(action.batchNumber, action.batchSize).pipe(
        logOperator('Effect 2'),
        map( (doc): Action => {
          switch (doc.type) {
            case 'added': return Actions.added({ data: doc.payload });
            case 'removed': return Actions.removed({ data: doc.payload });
            case 'modified': return Actions.modified({ data: doc.payload });
            default: return Actions.queryFailure({ error: { payload: doc, message: 'UNKNOWN_ACTION' } });
          }
        })
      );
    },
    onError: (action, error) => {
      return Actions.queryFailure({ error: { error, action } });
    },
  })
));

选项B：保留switchMap的实现

既然你已经验证过switchMap能正常工作，且它的行为（每次新Action进来就替换旧订阅）完全符合分页+实时监听的需求，直接沿用这个实现也是非常稳妥的选择。

内容的提问来源于stack exchange，提问作者ALGDB