Is anyone good at RXJS and Observables? Normally I dont have trouble but this one is throwing me off.
Its really old code and the issue is that the subscriptions is not being managed properly so that there are 2 API calls in quick succession which results in the first call being (cancelled) and the 2nd call working.
So functionally, everything still works but its not very good code. If you were to open the network tab of the browser, everytime you navigate to the page it will say (cancelled) for th==
Heres the culprit, which is in the constructor of the component. So navigate to this page and this code runs.
Code:
filteredMyObjects$ = this.stateService.myObjects$
.pipe(
tap((myObjects) => {
if (!myObjects || !myObjects.length) {
this.stateService.requestMyObjects();
}
}),
filter((myObjects) => myObjects && (myObjects.length !== 0))
);
So
this.stateService.requestMyObjects() dispatches the action which the epic (or effect) is listening for. The issue is that action gets dispatched twice in quick succession.
The epic is using a switchMap. So when the first action kicks off an API call, the second action occurs so quickly that the first action has not completed and the switchMap causes the first API call to (cancel).
This can be "fixed" in the epic by changing the switchMap to a concatMap but I want to fix it so that the above code is only dispatching the action a single time.
its kind of weird bc I want to first check if the list is empty, and if it is, dispatch the action. then I want to wait until the list is not empty to set the value.