RxJS scan+filter与bufferCount在NgRx Effect中的异常差异问题

先还原两种Effect的典型写法，再拆解核心差异：

版本1（正常工作） #

finalActionEffect$ = createEffect(() => this.actions$.pipe(
  // 监听两个目标action
  ofType(successAction1, successAction2),
  // 累计计数，初始值0，每收到一个符合类型的action就+1
  scan((count) => count + 1, 0),
  // 计数达到2时触发后续逻辑
  filter(count => count === 2),
  map(() => finalAction())
));

版本2（常见错误写法，无法触发） #

// 错误示例：bufferCount应用在单个action流上
finalActionEffect$ = createEffect(() => merge(
  this.actions$.pipe(ofType(successAction1)),
  this.actions$.pipe(ofType(successAction2), bufferCount(2))
).pipe(
  map(() => finalAction())
));

核心差异与问题根源 #

1. 版本1的scan逻辑：
   scan是状态累计型操作符，会持续维护内部计数状态——不管是successAction1还是successAction2，每收到一个符合类型的action就累加计数，只要累计到2就触发finalAction。它的计数是跨action类型的，且状态会持续保留，哪怕两个action间隔很久也能正常触发。

2. 版本2的bufferCount逻辑：
   你大概率是把bufferCount(2)错误应用在了单个action的流上（比如只监听successAction2后加bufferCount），这种情况下它会等待2个successAction2才会输出，自然无法满足"successAction1+successAction2各一次"的需求。

正确的版本2写法 #

如果要使用bufferCount(2)实现需求，需先合并两个action的流，再应用操作符：

finalActionEffect$ = createEffect(() => this.actions$.pipe(
  ofType(successAction1, successAction2),
  bufferCount(2),
  // 可选：验证两个action为不同类型，避免同类型重复触发
  filter((actions) => 
    actions.some(a => a.type === successAction1.type) && 
    actions.some(a => a.type === successAction2.type)
  ),
  map(() => finalAction())
));

为什么两者表现不同？ #

本质是操作符设计逻辑的差异：

• scan关注累计状态，只要累计值满足条件就触发，不受action间隔或顺序（除非你额外限制）的影响；
• bufferCount关注批量收集，必须收集到指定数量的连续值才会输出，若操作范围错误或收集过程中流出现异常，就无法触发后续逻辑。

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