Unsubscribing from an observable when another observable is unsubscribed

user_7247920 0
Viewed 189

Suppose I have a list of items that is queried from an API depending on a parameter that can be changed in the UI. When changing the value of this parameter, I dispatch an action:

this.store$.dispatch(new ChangeParameterAction(newParameterValue));

Now, on the receiving end, I want to trigger a new API call on every parameter change. I do this by subscribing to the store and then switching to the API observable. Then, I dispatch the result back into the store:

/** Statement 1 **/
this.store$.select(selectParameter).pipe(
    switchMap(parameter => this.doApiCall$(parameter))
).subscribe(apiResult => {
    this.store$.dispatch(new ResultGotAction(apiResult))
});

My UI is receiving the items by subscribing to

/** Statement 2 **/
this.store$.select(selectResults);

Now my question is: How can I join these two statements together so that we only have the subscription for Statement 1 for as long as the UI showing the results is active (and not destroyed)? I will always subscribe to the result of Statement 2, so Statement 1 will never be unsubscribed.

I've tried merging both observables and ignoring the elements for Statement 1, then subscribing tothe merged observables. But this looks like a very unreadable way for doing such a basic task. I think there must be a better way, but I can't find one. Hope you can help!

rxjs6 rxjs ngrx javascript
1 Answers

I can't tell exactly if this would run correctly, but I would go with moving the dispatch of ResultGotAction to a tap operator and then switching to this.store$.select(selectResults)

For example:

this.store$.select(selectParameter).pipe(
  switchMap(parameter => this.doApiCall$(parameter)),
  tap(apiResult => this.store$.dispatch(new ResultGotAction(apiResult))),
  switchMapTo(this.store$.select(selectResults))
);
user_107155020
Related