CODEWITHSUNDEEP
angularngrx
user17260293
user17260293

Reputation: 85

How do I make sure that I unsubscribed subscribe?

I have a subscription where I get some messages from the store to output toastr.

I unsubscribed by subscribe .unsubscribe().

How can check that I have really unsubscribe?

  subscription!: Subscription;

  ngOnInit(): void { }

  toastrError(): void {
    this.subscription = this.store.select(getMessage).subscribe(m => {
      (m.message && m.title) ? this.toastr.error(m.message, m.title) : null;
    });
  }

  singIn(): void {
    this.toastrError();
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

Upvotes: 2

Views: 2307

Answers (4)

Saghir
Saghir

Reputation: 2435

I think you can use the closed flag after unsubscribe() to validate it. As example

if(!this.subscription.closed)
      console.error("Some error unsubscribing ?!");

If you mean validating outside the component then you probably cannot as the ngOnDestroy will be called only before component instance destruction. You might try to emit an event here but probably will be late to check it !

However, as good practice, you may define a subject in your component and use it to cancel all of your subscriptions using takeUntil(). As example

export class LoginComponent implements OnInit, OnDestroy {

  private destroy$ = new Subject<void>();

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get("http://whatever")
      .pipe(takeUntil(this.destroy$))
      .subscribe(value => console.log(value));
  }

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

Check this question for difference between such methods

Angular RxJS Observable: takeUntil vs. unsubscribe with a Subscription

Upvotes: 2

Ran Turner
Ran Turner

Reputation: 18016

A component instance has a lifecycle that begins when Angular instantiates the component class and renders the component view (along with its child views). The lifecycle continues with some change detection, as Angular checks to see when data-bound properties change, and in response updates both the view and the component instance when needed. The lifecycle ends when Angular actually destroys the component instance and removes its rendered template from the DOM, so the ngOnDestroy is called immediately before Angular destroys the component (or directive).

If you want to make sure the unsubscription is actually occurring, you can either add a log at the ngOnDestroy method or debug it in the browser.

Upvotes: 1

davitSahakyan
davitSahakyan

Reputation: 31

  1. At first do not write like this use Services.
  2. You can use takeUntil like in this example.

import { Component, OnDestroy, OnInit } from '@angular/core';
// RxJs 6.x+ import paths
import { filter, startWith, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { BookService } from '../books.service';

@Component({
  selector: 'app-books',
  templateUrl: './books.component.html'
})
export class BooksComponent implements OnDestroy, OnInit {
  private ngUnsubscribe = new Subject();

  constructor(private booksService: BookService) { }

  ngOnInit() {
    this.booksService.getBooks()
      .pipe(
        startWith([]),
        filter(books => books.length > 0),
        takeUntil(this.ngUnsubscribe)
      )
      .subscribe(books => console.log(books));

    this.booksService.getArchivedBooks()
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(archivedBooks => console.log(archivedBooks));
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}

Upvotes: 0

Leonardo Freire
Leonardo Freire

Reputation: 309

I'm guessing you could see that you unsubscribed if no more error toasts would show up. But I get your point. You could either log the ngOnDestroy method to be sure it will run and thus, unsubscribe.

Or you could debug it with something like the demo I've come up with here. By showing/hiding the child component, you're able to see the subscription that is logging a 'ping' message, starts and stops accordingly.

Upvotes: 0

Related Questions