如何根据另一个 Observable 重置 RXJS 扫描运算符

问题描述

我有一个组件，它在呈现虚拟列表中的最后一个项目时触发 onScrollEnd 事件.此事件将执行新的 API 请求以获取下一页，并使用 scan 运算符将它们与之前的结果合并.

I have a component which triggers an onScrollEnd event when the last item in a virtual list is rendered. This event will do a new API request to fetch the next page and merge them with the previous results using the scan operator.

这个组件还有一个搜索字段，它会触发一个 onSearch 事件.

This component also has a search field which triggers an onSearch event.

如何在触发搜索事件时清除 scan 运算符的先前累积结果?还是我需要在这里重构我的逻辑?

How do I clear the previous accumulated results from the scan operator when a search event is triggered? Or do I need to refactor my logic here?

const loading$ = new BehaviorSubject(false);
const offset$ = new BehaviorSubject(0);
const search$ = new BehaviorSubject(null);

const options$: Observable<any[]> = merge(offset$, search$).pipe(
  // 1. Start the loading indicator.
  tap(() => loading$.next(true)),
  // 2. Fetch new items based on the offset.
  switchMap(([offset, searchterm]) => userService.getUsers(offset, searchterm)),
  // 3. Stop the loading indicator.
  tap(() => loading$.next(false)),
  // 4. Complete the Observable when there is no 'next' link.
  takeWhile((response) => response.links.next),
  // 5. Map the response.
  map(({ data }) =>
    data.map((user) => ({
      label: user.name,
      value: user.id
    }))
  ),
  // 6. Accumulate the new options with the previous options.
  scan((acc, curr) => {
    // TODO: Dont merge on search$.next
    return [...acc, ...curr]);
  }
);

// Fetch next page
onScrollEnd: (offset: number) => offset$.next(offset);
// Fetch search results
onSearch: (term) => {
  search$.next(term);
};

推荐答案

找到了一个可行的解决方案:我在 scan 运算符之前使用 withLatestFrom 检查当前偏移并重置累加器(如果需要)基于此值.

Found a working solution: I check the current offset by using withLatestFrom before the scan operator and reset the accumulator if needed based on this value.

Stackblitz 演示

这篇关于如何根据另一个 Observable 重置 RXJS 扫描运算符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！