Observing state changes in effects

[STOWouters]

Hello all,

I have a component store that keeps track of the current page as well as the active filters. There is also some form of pagination which will call the fetchItems() effect under some condition (e.g., when you scroll down far enough). The implementation looks something like this:

export interface ItemsState {
  page: number;  // current page
  filters: Filter[]; // current active filters
  items: []; // fetched items
}

@Injectable()
export class ItemsStore extends ComponentStore<ItemsState> {
  // ...

  fetchItems = this.effect(($) => $.pipe(
    exhaustMap(() => this.select((state) => ({
      page: state.page + 1,
      filters: state.filters,
    })).pipe(
      switchMap((params) => {
        return this.itemsService.getItems(params.page, params.filters).pipe(
          tapResponse(
            (items) => {
              // update state, but this triggers the above selector again, causing to keep fetching the next page
              this.patchState({
                 page: params.page,
                 // update items...
              });
            },
            () => { /* some error handling */ },
          ),
        );
      }),
    )),
  ));
}

The issue here is that the patchState call causes the selector in the first line to be triggered again, which in turn will fetch the next page, causing an infinite loop of fetching the next page (until it runs out). I am wondering if I am doing something fundamentally wrong with this implementation or is there a way to patch a state without triggering the selector?

I have also tried to use withLatestFrom(this.select(state => ...)) or take(1) instead, but while that does stop the infinite loop, it does not observe the changes on the filters, which is kind of required since fetching the items from the currently running request (if any) should be cancelled whenever the filters change.

Is there a way to observe changes in the state and cancel the running effect or another NgRx way to achieve this?