Как правильно отписаться от Observable Angular 7?

Question

В настоящее время я проверяю, нет ли в моем приложении утечек памяти. Я следую этому учебнику, где он показывает, как перейти с использования subscribe() на async, а также показывает, как явно отписаться во время ngOnDestroy.

Я изо всех сил пытаюсь проверить, работает ли моя реализация, и я хотел знать, действительно ли моя реализация этого в моем проекте отписывается.

Вот что есть в уроке в его компоненте:

@Component({
  /* ... */
  template: `
    <ul *ngIf="todos.length > 0">
      <li *ngFor="let todo of todos">{{todo.name}}</li>
    </ul>   
  `
})
export class TodosComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject<void>();

  todos: Todo[];

  constructor(private store: Store<State>) {}

  ngOnInit() {
    this.store
      .pipe(select(selectTodos), takeUntil(this.unsubscribe$)) // unsubscribe to prevent memory leak
      .subscribe(todos => this.todos = todos);            // unwrap observable
  }

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

Мой ngOnDestroy выглядит точно так же, как и его, но вот так выглядит мой звонок в сервис:

this.insightsService.getLatestsInsights(5)
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(z => {
        if (z != null) {
          this.latestInsights = z;
          this.visibleSlides = z.slice(0, this.amountOfSlidesToShow);
        }
      })

Итак, сервис работает, но я просто хочу знать, правильна ли моя реализация? Я не был уверен, что функция выбора была также или это применимо только к тому, что он использует. Дайте мне знать, если я смогу предоставить информацию.

Answer 1

Интересно, но я не могу найти полного ответа на этот вопрос, я нашел три подхода, но я не уверен, что они абсолютно правильные или нет, поэтому, если кто-нибудь знает лучшее решение, пожалуйста, предоставьте его. !!! ВАЖНО СИНТАКСИС КОДА НИЖЕ НЕ ПРОВЕРЕН

1. Первое решение - назначить подписку переменной, а затем использовать ее для отмены подписки.

public mySubscription: Observable<Array<Something>>;

export class someComponent OnInit, OnDestroy {


  constructor(private myService: MyService) {}

  ngOnInit() {

      this.mySubscription = this.myService.someMethod().subscribe(response => ... do something);
  }

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

.....

2. Второе решение - использование класса подписки RxJs. Все подписки могут быть объединены, так что вызов метода unsubscribe () одной подписки может отменить несколько подписок. Этого можно добиться, «добавив» одну подписку в другую:

....

import { Subscription } from 'rxjs/Subscription';

....

private subscription = new Subscription();

public mySubscription1: Observable<Array<Something>>;
public mySubscription2: Observable<Array<Something>>;

export class someComponent OnInit, OnDestroy {


    constructor(private myService: MyService) { }

    ngOnInit() {

        this.mySubscription1 = this.myService.someMethod().subscribe(response => ... do something);
        this.subscription.add(this.subscription.add(this.mySubscription1));

        this.mySubscription2 = this.myService.someMethod().subscribe(response => ... do something);
        this.subscription.add(this.subscription.add(this.mySubscription1));
    }

    ngOnDestroy() {

        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }

.....

3. Третье и последнее решение - использование оператора takeUntil от rxjs

....

import { Subject } from 'rxjs';

....

private unsubscribe = new Subject();

export class someComponent OnInit, OnDestroy {

    constructor(private myService: MyService) { }

    ngOnInit() {

        this.myService.someMethod()
            .pipe(takeUntil(this.unsubscribe))
            .subscribe(response => ... do something);

    }

    ngOnDestroy() {

        this.unsubscribe.next();
        this.unsubscribe.complete();
    }

.....

Answer 2

В этом уроке он использует Rgrx Store. Этот магазин может выдавать значения несколько раз. Так что это на самом деле не разовая вещь . И по той же причине отписаться от Observable необходимо.

В вашем примере вы звоните insightsService.getLatestsInsights(5), который возвращает Observable. Но я думаю, что это было бы единовременно, так как в вашем getLatestsInsights, скорее всего, вы возвращаете Observable, который возвращается одним из методов из HttpClient. И эти методы обычно возвращают Observables, которые просто дают значение один раз и завершаются. Я просто предполагаю, что здесь. Пожалуйста, поправьте меня, если я ошибаюсь.

Так что, если это действительно так, то вам на самом деле не нужно unsubscribe от вашего Subscription в первую очередь, не говоря уже о том, чтобы делать это правильно.

Вы можете узнать больше о том, когда вам нужно unsubscribe, в статье RxJS: Не отписывайтесь Бен Леш кто Rxjs Lead.