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) => { onCleanup(() => { console.log('cleanup'); }); });
https://zenn.dev/rdlabo/articles/f085832bed97b4
https://qiita.com/tronicboy/items/00633a52c7814e7c8ad6
まとめ
・signalとrxの使い分け
singalは簡単なイベントの実施や同期的なやりとりのみ
rxは複雑なコントロール