When a user chooses an order in my scenario:
selectOrder(orderId): void {
this.store$.dispatch(
selectOrder({orderId})
);
}
The order UI component triggers an action to load all associated data:
private fetchOrderOnSelectOrder(): void {
this.store$.select(selectSelectedOrder).pipe(filter((selectedOrder: Order | null): selectedOrder is Order => Boolean(selectedOrder)))
.subscribe((selectedOrder: Order) => {
this.store$.dispatch(getOrder({
orderId: selectedOrder.id
}))
}
);
}
An effect waits for this action to send a request to the server:
public getOrder$ = createEffect(() =>
this.actions$.pipe(
ofType(getOrder),
switchMap((props: GetOrderProps) =>
this.orderService.getOrder(props.orderId).pipe(
map((order: Order) =>
/* Logic for successfully received order */
),
catchError((error: HttpErrorResponse) =>
/* Logic for failure */
),
takeUntil(this.actions$.pipe(ofType(selectOrder))),
),
),
),
);
Take notice of the takeUntil line, as it seems to be causing an issue. I included it to cancel any ongoing request when selecting a new order, assuming we don't need the previous result anymore. However, this seems to immediately cancel all requests, preventing me from retrieving any orders at all.
Why does this unexpected behavior occur? As far as I can tell, the request should happen after the select order action, so why is its corresponding observable being affected by it?