RxJS Tips

RxJS 7

いつも書いてる .subscribe((x) => {}, (err) => {}); は、RxJS 7.x から、@deprecated がつく。ので、.subscribe({ next: (x) => {}, error: (err) => {} }); が recommended migration tools がやってくれるかどうか… RxJS - Subscribe Arguments https://rxjs.dev/deprecations/subscribe-arguments 6.6.4 https://github.com/ReactiveX/rxjs/blob/6.6.4/src/internal/Observable.ts#L80 7.0.0 @deprecated がついてる https://github.com/ReactiveX/rxjs/blob/7.0.0/src/internal/Observable.ts#L79

RxJs 6.6.6 （今のwebapp）では、combineLatest([...]) の中は、Observable は6つまでしか指定できない： https://github.com/ReactiveX/rxjs/blob/6.6.6/src/internal/observable/combineLatest.ts#L44 7.0.0以降は、いくつでも指定可能（たぶん https://github.com/ReactiveX/rxjs/blob/7.0.0/src/internal/observable/combineLatest.ts

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#variadic-tuple-types ここに、まさに同じような例で 4.0 の機能として説明されてる https://rxjs.dev/api/index/type-alias/ObservableInputTuple

withLatestFrom

Rxjs で、withLatestFrom(x$.pipe(filter(..)) などで filter 付きの Observable を指定したときに、filter 満たしたあとは値が流れると勘違いしてしまった

const source1 = new Subject<string>();
const source2 = new Subject<string>();

source1.pipe(withLatestFrom(source2)).subscribe(([s1, s2]) => {
  console.log(`s1: ${s1} s2: ${s2}`);
});

source1.next('100');
source2.next('AAA');
// ※ここで、100 - AAA が流れるわけではない

source1.next('200');
// s1: 200 s2: AAA

https://stackblitz.com/edit/rxjs-qt7wiq?file=index.ts

combineLatest

combineLatestは、いわゆる途中の状態が来ることが普通にある。同じ stream などを入れるときに勘違いしないよう注意。

import { of, BehaviorSubject, combineLatest } from 'rxjs'; 
import { map } from 'rxjs/operators';

const sourceA$ = new BehaviorSubject<number>(100);
const sourceB$ = new BehaviorSubject<number>(200);
const sourceC$ = new BehaviorSubject<number>(300);

combineLatest([
  sourceA$,
  sourceB$,
  sourceC$,
  sourceA$.pipe(map(x => x + 1)), // sourceA$ を使う
]).subscribe(([a, b, c, d]) => {
  console.log(`a: ${a}, b: ${b}, c: ${c}, d: ${d}`)
})

sourceA$.next(900);

/* 
a: 100, b: 200, c: 300, d: 101
a: 900, b: 200, c: 300, d: 101 ← d の値が古い
a: 900, b: 200, c: 300, d: 901
*/

https://stackblitz.com/edit/rxjs-fzdtxz

switchMap, COMPLETE

https://stackblitz.com/edit/rxjs-xsbxe1

const source = of(10).pipe(
  switchMap(x => {
    if (x == 10) {
      return of(x).pipe(
        map(() => { throw new Error() }),
        catchError(() => empty()))
    }
    return of(x);
  }),
);

source.subscribe(
  (x) => console.log(x),
  (error) => console.error(error),
  () => console.log('COMPLETE'));

//COMPLETE

of(10) で 10が流れる -> switchMap 内で empty() になる -> empty() は COMPLETEだけ送信 -> switchMap内なので値は流れない（COMPLETEが流れるわけではない。switchMapは値だけ流す） of(10) の COMPLETE が流れる

hhyyg/rxjs-tips.md

RxJS 7

withLatestFrom

combineLatest

switchMap, COMPLETE