11 月に入社したフロントエンドエンジニアの id:kasaharu です。エモーションテックではフロントエンドの開発に Angular を使用しているので、今日は Angular に関する小ネタを紹介します！

この記事はエモーションテック Advent Calendar 2022 の 8 日目の記事です。

はじめに

Angular でアプリケーション開発をしているとコンポーネント内の Subscription をコンポーネント破棄時に購読解除する必要が多くあるのではないでしょうか？その際、いくつかの方法があると思いますが、もしお手元のアプリケーションに NgRx ComponentStore を使っている場合、ComponentStore の lifecycle hook を使う選択肢もあるため、この記事ではその方法を説明します。

よく見る購読解除の例

購読解除の例としてよく見るのは RxJS の takeUntil() または unsubscribe() を使う手法だと思います。例として takeUntil() の方を下記に示します。

@Component(...)
export class MoviesPageComponent implements OnInit, OnDestroy {
  constructor(private readonly store: MoviesStore, private readonly service: MovieService) {}

  movies$ = this.store.movies$;
  private onDestroy$ = new Subject<void>();

  ngOnInit(): void {
    this.service.getMovie('#001')
      .pipe(takeUntil(this.onDestroy$))
      .subscribe((movie) => this.store.addMovie(movie));
  }

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

コンポーネントの OnDestroy のときにストリームが流れる onDestroy$ というプライベートフィールドを用意し、それを takeUntil() するというものです。特に問題はないのですが、プライベートフィールドや ngOnDestroy を準備する必要があります。

NgRx ComponentStore の lifecycle hook を使う

もし、対象のコンポーネントが NgRx ComponentStore を使用している場合、ComponentStore が提供している API を使うことで、購読解除のためのフィールドやメソッドの準備が不要になります。

@Component(...)
export class MoviesPageComponent implements OnInit {
  constructor(private readonly store: MoviesStore, private readonly service: MovieService) {}

  movies$ = this.store.movies$;

  ngOnInit(): void {
    this.service
      .getMovie('#001')
      .pipe(takeUntil(this.store.destroy$))
      .subscribe((movie) => this.store.addMovie(movie));
  }
}