NGRX ComponentStore Effect无限循环问题求助

问题原因 #

你遇到的循环问题核心在于ComponentStore的select操作符触发逻辑：

• select会在每次状态更新时执行传入的投影函数，返回新的结果值。
• 你的params$返回的是一个新对象{page: state.page}，哪怕只更新了loading字段，状态对象变化后，投影函数会生成新的对象引用。
• RxJS流默认采用引用比较，新的对象引用会被判定为新值，导致params$发出新数据，进而触发loadBusinesses Effect；Effect里的patchState又会更新状态，最终形成无限循环。

解决方案 #

以下几种方式可以打破循环：

1. 直接选择单个基础类型属性

如果params$仅需page值，直接返回基础类型而非对象：

private readonly params$ = this.select(state => state.page);

基础类型（number、string等）采用值比较，只有当page的实际值变化时，params$才会发出新数据，不会因loading更新而触发。

2. 为对象结果添加引用比较过滤

如果必须返回对象结构，使用distinctUntilChanged配合浅比较过滤不必要的更新：

import { distinctUntilChanged } from 'rxjs';

private readonly params$ = this.select(state => ({
  page: state.page
})).pipe(
  distinctUntilChanged((prev, curr) => prev.page === curr.page)
);

这样只有当page的值真正变化时，params$才会发出新数据，避免因其他状态字段更新导致的无效触发。

3. 在Effect中限制触发条件

如果不想修改params$，也可以在Effect内添加过滤逻辑，比如仅在page变化时执行：

readonly loadBusinesses = this.effect(() => {
  return this.params$.pipe(
    distinctUntilChanged((prev, curr) => prev.page === curr.page),
    tap(() => this.patchState({ loading: true }))
  );
});

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