Unsubscribing in Angular NGXS

Question

I’m new to NGXS in Angular and I have read that you don’t need to unsubscribe when you use the async pipe. However I’m also subscribing from the queryParams and I’m subscribing from the dispatches action. Do I need to unsubscribe from this 2 codes below?

this.route.queryParamMap
 .pipe(map(params => params.get('page')))
 .subscribe((page: any) => {
   this.page = page;
   console.log(page);
  });

this.store.dispatch(new AddEmployee(form.value)).subscribe(() => {
 form.reset();
 this.modalReference.close();

not sure about the store's observables, but ActivatedRoute ones are handled by Angular. — Stavm, May 16 '19 at 14:36
Duplicate of https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription Short answer: You don't have to for these two cases since the observables will both complete after firing once. It's not easy to know when you have to or not in a general sense. Some prominent developers believe you should never have to unsubscribe. Others feel you should always unsubscribe. — Pace, May 16 '19 at 17:22
Possible duplicate of [Angular/RxJs When should I unsubscribe from \`Subscription\`](https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription) — Pace, May 16 '19 at 17:23

score 2 · Accepted Answer · edited Sep 17 '20 at 07:16

2

The answer is don't need to unsubscribe from these two set of codes. Because routes are handled by Angular and second, the store is handled by ngxs. No need to unsubscribe. Unsubscribe only when using rxjs

GitHub: Does I need to unsubscribe on distaching actions?

amcdnl commented on Jul 3, 2018

Nope. Its handled for you.,

edited Sep 17 '20 at 07:16

Erik Philips

53,428
11
128
150

answered May 17 '19 at 06:46

Joseph

7,042
23
83
181

2

Do you have a reference that confirms this? – Rich Duncan May 18 '19 at 14:44

Ben Racicot · Answer 2 · 2022-01-20T23:12:10.380

So I'm not sure that NGXS itself takes care of any complete's for us. It's now all basic RxJS standards.

From the link in @Joseph's answer, @Mark Whitfield states:

If you subscribe to the observable then you need to make sure that you unsubscribe.

Sliced data

Dispatching a store Action without subscribing would be a “cold” observable. No need to unsubscribe.

this.store.dispatch(new FetchStatuses()); // Cold

Async pipes are handled by NGXS and or Angular's Async pipe pattern

// controller
@Select(SomeState.scope) scope$!: Observable<any>;

// view
<p-dropdown [options]="scope$ | async" ...

However, this dispatch scenario would obviously need to be unsubscribed

this.store.dispatch(new AddAnimal(name)) // Hot
   .subscribe(res) => {
     // Hot observable, alive until manually completed
   });

score 0 · Answer 3 · answered May 16 '19 at 17:26

0

It's done pretty simple. You need to describe a Subject and call it in ngOnDestroy lifecycle. Also you should use takeUntil pipe on observable with provided Subject.

destroy$ = new Subject<void>();

ngOnInit(): void {
  this.service.observable$.pipe(
    takeUntil(this.destroy$)
  ).subscribe();
}

ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

It's better to use this method when the observable emits value more than once.

For example if you use this.router.events.subscribe it will fire events even if the component has been destroyed unless you use the approach shown above.

answered May 16 '19 at 17:26

Sergey

7,184
13
42
85

1

My question is do i need to unsubscribe? Which of the two set of codes do i need to unsubscribe? – Joseph May 17 '19 at 04:06
1

One unneeded unsubscribtion is not that bad as if you didn't. I would unsubscribe in both cases thus you don't loose anything and don't cause any potential memory leaks. In case of working with route it should be always unsubscribed when you destroy the component – Sergey May 17 '19 at 05:08
Great answer. This worked well for me using ngxs when I had too many results due to .actions$.pipe(ofActionSuccessful(SomeAction).subscribe(). This becomes a much more inclusive answer for managing unsubscriptions rather than trying to track each individual subscription. – Trevor de Koekkoek May 18 '19 at 05:35

Unsubscribing in Angular NGXS

3 Answers3