RxJS技术问题：combineLatest中$1/$3/$4触发时重置分页Observable$2

针对你在combineLatest中需要重置分页Observable（$2）的场景，我提供两种简洁的实现思路，都能完美满足当$1、$3、$4发射新值时自动将$2重置为页码1的需求：

方案一：用scan维护分页状态（推荐，保留分页大小） #

这种方案通过维护分页的状态，在重置时只修改页码，保留用户之前设置的每页大小，体验更友好：

import { combineLatest, merge, scan, map, distinctUntilChanged } from 'rxjs';

// 1. 创建重置信号：当$1/$3/$4变化时，发出重置指令
const resetPageSignal$ = merge($1, $3, $4).pipe(
  map(() => ({ type: 'reset' } as const))
);

// 2. 处理分页Observable：重置时页码归1，正常分页时更新状态
const adjustedPage$ = merge(
  // 包装正常的分页事件
  $2.pipe(map(event => ({ type: 'page', event } as const))),
  // 合并重置信号
  resetPageSignal$
).pipe(
  // 用scan维护当前分页状态
  scan((currentPage, action) => {
    if (action.type === 'reset') {
      // 重置页码为1，保留原每页大小
      return { ...currentPage, pageIndex: 1 };
    } else {
      // 更新为最新的分页信息
      return action.event;
    }
  }, { pageIndex: 1, pageSize: 10 } as PageEvent), // 这里设置你的默认分页大小
  // 避免重复值触发不必要的HTTP请求
  distinctUntilChanged((prev, curr) => 
    prev.pageIndex === curr.pageIndex && prev.pageSize === curr.pageSize
  )
);

// 3. 组合所有Observable并触发HTTP请求
combineLatest([$1, adjustedPage$, $3, $4]).subscribe(([sort, page, filter1, filter2]) => {
  CALL_HTTP_WITH_PARAMETERS(
    `${sort.active},${sort.direction}`,
    page.pageIndex,
    filter1,
    filter2
  );
});

方案一的工作逻辑： #

• 当$1（排序变更）、$3（过滤器）或$4（其他过滤器）发出新值时，resetPageSignal$会发出重置指令
• adjustedPage$会响应重置指令，将当前页码重置为1，同时保留用户之前设置的每页大小
• 最终combineLatest会自动组合最新的四个值，触发符合预期的HTTP调用

方案二：用switchMap切换分页流（代码更简洁） #

这种方案在每次需要重置时，直接创建一个新的分页流，初始值为页码1，适合不需要保留分页大小的场景：

import { combineLatest, merge, switchMap, of } from 'rxjs';

merge($1, $3, $4).pipe(
  startWith(null), // 初始加载时触发一次
  switchMap(() => {
    // 每次重置时，创建一个初始页码为1的分页Observable，同时监听后续分页变化
    const initialPage$ = of({ pageIndex: 1, pageSize: 10 } as PageEvent);
    const pageWithReset$ = merge(initialPage$, $2);
    
    // 组合当前的排序、过滤器和分页流
    return combineLatest([$1, pageWithReset$, $3, $4]);
  })
).subscribe(([sort, page, filter1, filter2]) => {
  CALL_HTTP_WITH_PARAMETERS(
    `${sort.active},${sort.direction}`,
    page.pageIndex,
    filter1,
    filter2
  );
});

方案二的工作逻辑： #

• 每当$1/$3/$4变化时，switchMap会丢弃之前的分页流，创建一个新的分页流（初始页码为1）
• 新的分页流会同时监听用户后续的分页变更，保证分页功能正常工作
• 最终的combineLatest会自动取四个Observable的最新值，触发HTTP调用

验证你的示例场景： #

1. 初始状态：四个Observable的初始值会正常组合，调用CALL_HTTP_WITH_PARAMETERS("name,asc", 2, "bla bla", "bla bla")
2. 当$1发出"name,desc"：重置信号触发，$2被重置为1，调用CALL_HTTP_WITH_PARAMETERS("name,desc", 1, "bla bla", "bla bla")
3. 当$3发出"new value"：重置信号触发，$2被重置为1，调用CALL_HTTP_WITH_PARAMETERS("name,asc", 1, "new value", "bla bla")

两种方案都能完美匹配你的需求，可以根据实际场景选择～

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