title: How to reset a RXJS scan operator based on another Observable
body: <p>I have a component which triggers an <code>onScrollEnd</code> 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 <code>scan</code> operator.</p>
  
  <p>This component also has a search field which triggers an <code>onSearch</code> event.</p>
  
  <p>How do I clear the previous accumulated results from the <code>scan</code> operator when a search event is triggered? Or do I need to refactor my logic here?</p>
  
  <pre><code>const loading$ = new BehaviorSubject(false);
  const offset$ = new BehaviorSubject(0);
  const search$ = new BehaviorSubject(null);
  
  const options$: Observable&lt;any[]&gt; = merge(offset$, search$).pipe(
    // 1. Start the loading indicator.
    tap(() =&gt; loading$.next(true)),
    // 2. Fetch new items based on the offset.
    switchMap(([offset, searchterm]) =&gt; userService.getUsers(offset, searchterm)),
    // 3. Stop the loading indicator.
    tap(() =&gt; loading$.next(false)),
    // 4. Complete the Observable when there is no 'next' link.
    takeWhile((response) =&gt; response.links.next),
    // 5. Map the response.
    map(({ data }) =&gt;
      data.map((user) =&gt; ({
        label: user.name,
        value: user.id
      }))
    ),
    // 6. Accumulate the new options with the previous options.
    scan((acc, curr) =&gt; {
      // TODO: Dont merge on search$.next 
      return [...acc, ...curr]);
    }
  );
  
  // Fetch next page
  onScrollEnd: (offset: number) =&gt; offset$.next(offset);
  // Fetch search results
  onSearch: (term) =&gt; {
    search$.next(term);
  };
  </code></pre>