When working on a single page, I often trigger multiple actions to initiate search requests to the same API endpoint. Within my effects setup, I have an effect specifically for handling these requests. It looks something like this:
runSearchSuccess$ = createEffect(() =>
this.actions$.pipe(
ofType(MyActions.runSearch),
mergeMap(({searchRequest}) => this.myService.runSearch(searchRequest).pipe(
map((response) => {
return MyActions.runSearchSuccess({ searchResponse: response })
}),
catchError(error => {
const searchResponse = null;
return [
MyActions.updateSearchStatuses({searchResponse}),
]
}),
)),
)
);
However, since these requests can sometimes take a significant amount of time, there is a need to cancel unnecessary ones when user input changes on the page. The relevant data regarding search requests is stored in the state, and I use a selector to retrieve all active requests. My goal is to monitor changes in this selector and cancel any search request that becomes irrelevant. Using TakeUntil doesn't seem feasible as it depends on the selector output. I've also attempted to utilize TakeWhile but haven't found a way to cancel the API call itself, rather than just halting the effect. Is there a way to achieve this using TakeWhile or is there a more effective approach to managing and cancelling active network calls as needed?