如何在NgRx Effect中获取Store中的分页状态数据

核心思路：从NgRx Store中获取分页状态 #

既然已经将分页状态保存到Store中，就应该直接从Store读取，而非使用服务变量（不符合单一数据源的状态管理理念）。以下是两种可行实现方案：

方案一：用withLatestFrom在Effect中获取当前状态 #

使用RxJS的withLatestFrom操作符，在Effect中同步获取Store里的分页状态，再传递给getOrders action。

修改后的Effect代码：

saveOrder = createEffect(() => {
  return this.actions.pipe(
    ofType(OrderActions.saveOrder),
    // 从Store中提取当前分页状态（selectPaginationState是你定义的状态选择器）
    withLatestFrom(this.store.select(selectPaginationState)),
    switchMap(([postAction, paginationState]) =>
      this.orderAPIService.postSaveOrder(postAction.order).pipe(
        switchMap((returnOrder) => [
          OrderActions.saveOrderSuccess({ order: returnOrder }),
          // 传入从Store获取的真实分页参数
          OrderActions.getOrders({ 
            ordersRequest: { 
              pageSize: paginationState.pageSize, 
              pageNumber: paginationState.pageNumber 
            } 
          }),
        ]),
        tap(() => this.snackBarService.openSnackbar('保存完成', '确定')),
        catchError((error) =>
          of(
            OrderActions.saveOrderFailure({
              notification: {
                type: 'error',
                message: '保存失败，请稍后重试',
                time: Date.now(),
                technicalError: error,
              },
            })
          )
        )
      )
    )
  );
});

注意事项：

• selectPaginationState需要你提前定义，用于从Store中精准提取分页状态数据
• 确保分页组件的page事件已经正确将分页状态同步到Store（即你提到的this.paginator.page.subscribe(...)逻辑正常工作）

方案二：将分页状态附加到saveOrder action参数中 #

在组件触发saveOrder action时，直接把当前分页状态作为参数传入，Effect中直接读取该参数即可。

1. 组件中触发action的代码：

// 从组件或Store中获取当前分页状态，随saveOrder action一起发送
this.store.dispatch(
  OrderActions.saveOrder({
    order: yourOrderData,
    pagination: currentPaginationState 
  })
);

2. 修改后的Effect代码：

saveOrder = createEffect(() => {
  return this.actions.pipe(
    ofType(OrderActions.saveOrder),
    switchMap((postAction) =>
      this.orderAPIService.postSaveOrder(postAction.order).pipe(
        switchMap((returnOrder) => [
          OrderActions.saveOrderSuccess({ order: returnOrder }),
          // 直接使用action中携带的分页状态
          OrderActions.getOrders({ 
            ordersRequest: postAction.pagination 
          }),
        ]),
        // 其余逻辑保持不变
      )
    )
  );
});

为什么不推荐用服务变量存储状态？ #

你提到的服务变量方案不符合NgRx的设计原则：

• 违背单一数据源理念，状态分散后难以追踪和调试
• 无法利用NgRx的时间旅行、状态快照等调试特性
• 多组件共享状态时，容易出现状态不一致的问题

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