【RxJS】redux-observable入門 #RxJS

今まで、React Nativeでredux-sagaを使ったことはあるのですが、それ以外の非同期通信のライブラリについて知見がありませんでしたので、少しまとめます。
ざっくり

redux-saga
redux-thunk
redux-observable

がメジャーどころであるのですが、今回はredux-observableです。

redux-observableとはなんだ

公式いわく

RxJS 6-based middleware for Redux.

RxJSってなんだ

そもそもRxJSを知りませんでしたので、調べてみます。

とりあえず簡単なサンプルから。

トリプルクリックでランダムな値

// ボタンクリックでランダムな値を生成
const output = document.querySelector("output");
const button = document.querySelector("button");

Observable.fromEvent(button, "click")
  .bufferCount(3) // <--- ３回イベントをバッファ
  .subscribe(() => {
    output.textContent = Math.random()
      .toString(36)
      .slice(2);
  });

ここで登場したもの

bufferCount

countだけバッファする

Observerがデータを購読する。
bufferCount.subscribeの場合、bufferCountのバッファをObserver(観測者)がsubscribeで取得する。

RxJS(ReactiveX)における非同期イベント管理の基本概念

いきなりObserverやらsubscribeやら、見知らぬ単語が出てきました。

Observable

呼び出し可能なevent handler？

Observer

Observableからcallbackして値を取得する（観測者）

Subscription

Observableの実行。実行のキャンセルで便利とのこと

Operators

関数型プログラミングの純粋関数

Subject

値やイベントを複数のObserverにマルチキャストする

Schedulers

dispatcherのキャンセルなどをスケジュールコントロールできる

ReactiveX とは

ReactiveX
JSに限らず、いろんな言語に移植されている。
概念やインタフェース等は各言語の移植後でも共通しているようである。

400ms以内にトリプルクリックしたときにランダム値

そしてもう一度サンプルへ

// 400ms以内にトリプルクリックしたときにランダム値生成
const output2 = document.querySelector("output2");
const button2 = document.getElementById("btn2");
const click$ = Observable.fromEvent(button2, "click");

Observable.fromEvent(button2, "click")
  .bufferWhen(() => click$.delay(400)) // <--------- 400ms待つ
  .filter(events => events.length >= 3)　// <--------- events３回
  .subscribe(() => {
    output2.textContent = Math.random()
      .toString(36)
      .slice(2);
  });

シリアル通信に似ている気がする

共感してくれる人がいるはず

似てるなあ、と思ってからRxの概念がすっと腹落ちした。

Action in, Action Outの概念

storeとactionの間にEpicという形で挟まることで、Rxの概念をAction（Redux）にもたらす。

Actionを溜めて、一気に実行する。
dispatch後のバッファ中のactionはキャンセルすることもできる

などなどの作用がある

他ライブラリとの違い

redux-thunk：
- シンプル、その分複雑な処理は苦手(?)
- dispatch済みアクションのキャンセルが不可
redux-Observable：
- アクションをポーリングで実行したりできる
- dispatch済みアクションのキャンセルが可能
redux-saga：
- generator関数による実装のため非同期処理の中で同期的に実装
- dispatch済みアクションのキャンセルが不可

と、言われている

所感

・まだまだRxJSの理解が必要そう。若干のハードル？
　=> ただし、JS以外にも言語横断的にReactiveXの概念は使える　　
　　=> 大きな学習コストではない？

・ReactiveXの概念がシリアル通信に似てた

・sagaとobservableは比較されがちだが使用感は異なる？？

【RxJS】redux-observable入門