孤独プログラマー譚

孤独死が近い。

RxJS pluck

オブジェクトのプロパティ名を指定して値を返却できるオペレータ。
mapオペレータで十分な気がする。

let obs = of(
  { a: 1, b: { c: 2 } },
  { a: 3, b: { c: 4 } },
  { a: 5, b: { c: 6 } },
)

obs.pipe(
  op.pluck('a')
).subscribe(cl) // 1,3,5

obs.pipe(
  op.pluck('b', 'c')
).subscribe(cl) // 2,4,6

obs.pipe(
  op.map(x => x.a)
).subscribe(cl) // 1,3,5

RxJS exhaustMap

初めのストリームが優先して実行される。
実行中に後から来たストリームは、キャンセルされる。
switchMapと逆バージョンのようなイメージ。

of(0, 1, 2).pipe(
  exhaustMap(x => sto(x + 1))
).subscribe(cl) // 1

timer(0, 500).pipe(
  exhaustMap(x => sto(x, 1000))
).subscribe(cl) // 0,2,4,6...

timer(0, 1000).pipe(
  exhaustMap(x => sto(x, 1000))
).subscribe(cl) // 0,1,2,3...

RxJS 結合オペレータ覚え書き

let obs1 = sto(1)
let obs2 = sto(2)

merge(obs1, obs2).subscribe(cl) // 1秒後に1, 2
concat(obs1, obs2).subscribe(cl) // 1秒後に1, 2秒後に2
forkJoin(obs1, obs2).subscribe(cl) // 1秒後に[1, 2]
zip(of(1,2), of(3,4)).subscribe(cl) // 1秒後に[1, 3] [2, 4]



共通関数。

function sto(x, time = 1000)  {
  const observable = new Observable(subscriber => {
    setTimeout(() => {
      subscriber.next(x)
      subscriber.complete()
    }, time);
  });
  return observable
}

function cl(x) {
  console.log(x)
}

RxJS Subject

Subjectは、Observable + Observer である。
Subjectはユニキャストできる。
Subjectは、Subjectオブジェクト作成後、後々ストリームを流せる。
Observableオブジェクトより、使い勝手が良さそう?

let sbj = new Subject

sbj.subscribe((val) => console.log(val))
sbj.subscribe((val) => console.log(val * 10))

sbj.next(1) // 1, 10
sbj.next(2) // 2, 20
sbj.next(3) // 3, 30

RxJS tap

前回と同じ、こちら共通関数。

function sto(x, time = 1000)  {
  const observable = new Observable(subscriber => {
    setTimeout(() => {
      subscriber.next(x)
      subscriber.complete()
    }, time);
  });
  return observable
}

function cl(x) {
  console.log(x)
}



副作用のある処理は、tapに書く。
パッと見で、とても分かりやすい。

let obs = sto(1)
let meta = 'foo'

obs.pipe(
  tap(() => {
    cl(meta) // 'foo'
    meta = 'bar'
  })
)
.subscribe(() => {
  cl(meta) // 'bar'
})

RxJS mergeMap, concatMap, switchMapの違い

以下、共通関数。

function sto(x, time = 1000)  {
  const observable = new Observable(subscriber => {
    setTimeout(() => {
      subscriber.next(x)
      subscriber.complete()
    }, time);
  });
  return observable
}

function cl(x) {
  console.log(x)
}


  • mergeMap
of(0, 1, 2).pipe(
  mergeMap(x => sto(x + 1, 1000))
)
.subscribe(cl)

1,2,3 と同時に表示される。

  • concatMap
of(0, 1, 2).pipe(
  concatMap(x => sto(x + 1, 1000))
)
.subscribe(cl)

1,2,3 と1秒間隔で表示される。

  • switchMap
of(0, 1, 2).pipe(
  switchMap(x => sto(x + 1, 1000))
)
.subscribe(cl)

3 と表示される。
1,2 はキャンセルされる。