0

I am developing page which can display job details of a job, for this purpose I am using NGRX store to dispatch actions and subscribing to it to display the data like below

this.store.dispatch(new LoadJobDetails(jobIdsObject));
this.subs.add(
    this.store.pipe(select(state => state.chatbotStoreData.jobDetailsObject)).subscribe(
      (data) => {
          if(data) {
            this.jobDetails = data;
            this.getJobHomeSteps();
          }
      }
    )
);

getJobHomeSteps() {
this.store.dispatch(new LoadJobStepsDetails(this.jobId));
this.subs.add(
    this.store.pipe(select(state => state.chatbotStoreData.jobHomeStepsDetailsObject)).subscribe(
      (data) => {
          if(data) {
            this.jobStepsDetails = data;
          }
      }
    )
);
}

and in ngondestroy I am unsubscribing to all the subscriptions like below,

ngOnDestroy(){
this.subs.unsubscribe();
}

This is working fine, but I have sidenav menu with list of jobs, on click of each job, job details page update with clicked job details. Here, on click of each job, intial subscription is happening many times and dispatch API's are calling multiple times because I can't able to unsubscribe previous job subscriptions.

How can I unsubscribe to all the subscriptions in that particular component on params change, or else any other way I can solve this problem. Any help would be appreciated, thanks!!!

Siva Kumar S
  • 409
  • 1
  • 6
  • 21
  • You're not showing your 'params change' code in the question. I think `switchMap` could help you. It automatically unsubscribes from the previous inner Observable when the outer one emits. `paramsChange.pipe( switchMap(p => innerObservable) )` – frido Feb 19 '20 at 09:39
  • Hi @fridoo my URL looks like this 'http://localhost:4200/#/job/1712' and the job Id will be changing for every job. On param change I am calling methods to dispatch the actions. My code looks like below, this.activatedRoute.params.subscribe( params => { this.initiateJobHomeData(); } ) – Siva Kumar S Feb 19 '20 at 09:42
  • Please update your question with the necessary code. How does ` this.initiateJobHomeData()` look like? As I said you should `switchMap` from your params to the required Observable: `this.activatedRoute.params.pipe(switchMap(params => this.initiateJobHomeDataAsObservable() )).subscribe(..)` – frido Feb 19 '20 at 09:45
  • Hi @fridoo Inside params subscribe I am calling this.initiateJobHomeData(); method and inside that method I am dispatching all the actions and subscribing to the store as shown above in the question. – Siva Kumar S Feb 19 '20 at 09:52
  • If you want to unsubscribe from an Observable on param changes you should `switchMap` to this Observable. You'll have to restructure your code and create a method that returns an Observable (e.g. return `this.store.pipe(select(state => state.chatbotStoreData.jobDetailsObject))` and don't subscribe) then call this method inside `switchMap` as shown in my comments above and subscribe in `ngOnInit`. – frido Feb 19 '20 at 10:06

1 Answers1

0
 getSearchResultsObservable(control: FormControl): Observable<any> {
    return control.valueChanges.pipe(
      debounceTime(100),
      distinctUntilChanged(),
      switchMap(data => this.getSearchResults(control.value))
    );
  }
Sarthak Agrawal
  • 15
  • 9