Skip to main content

Effective Angularの第7章のまとめ

Effective Angular

Effective Angularの第6章のまとめ
の続編

7章:Mastering Reactive Programming in Angular
を読んだので調べたことをつらつらと書く


RxJs
・takeUntil
引数のストリームをトリガーに、本ストリームを終了する。
https://qiita.com/mask610/items/d7758d120b4d8a82aef5
以下のようにすればunsubscribeしなくてもよくなる。

observable$.pipe(takeUntil(trigger$)).subscribe(value => {
  console.log(value);
});

・takeUntilDestroyed
takeUntilの代わりにtakeUntilDestroyedが最新

protect destroy = inject(DestroyRef);
observable$.pipe(takeUntilDestroyed(this.destroy)).subscribe
value => {
  console.log(value);
});

・AsyncSubject
値は最後のみ
completeで全部流れる
https://qiita.com/ksh-fthr/items/6c6cb89acce6fe756c60

・from
ofは数字、fromは配列
from([1, 2, 3])は1, 2, 3を順に流す

・forkJoin
全部のobservableが完了したら、最後の値を配列で返す
https://zenn.dev/milab/articles/0de6ceb46025f3

 

Signal
・effect

const count: WritableSignal<number> = signal(1);
const double: Signal<number> = computed(() => count() * 2);
console.log('conmputed:' + double);]

effect(() => {
    console.log(<code>count is: ${count()}</code>);
});
effect((onCleanup) =&gt; {
    onCleanup(() =&gt; {
        console.log('cleanup');
    });
});

https://zenn.dev/rdlabo/articles/f085832bed97b4
https://qiita.com/tronicboy/items/00633a52c7814e7c8ad6

 

まとめ
・signalとrxの使い分け
singalは簡単なイベントの実施や同期的なやりとりのみ
rxは複雑なコントロール

Effective Angular

関連記事:

Pocket