【RxJS】redux-observable入門 

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

- redux-saga
- redux-thunk
- redux-observable

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


## redux-observableとはなんだ

![image.png](https://qiita-image-store.s3.amazonaws.com/0/103475/667c109b-8a13-0948-10a1-2ab2dde11cb0.png)

公式いわく

**RxJS 6-based middleware for Redux.**

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

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

* * * 

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

```js
// ボタンクリックでランダムな値を生成
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);
  });
```

![2018-09-28_buffercount](https://user-images.githubusercontent.com/10850034/46182818-de357480-c308-11e8-9851-5270c1137b43.gif)

ここで登場したもの

#### bufferCount
countだけバッファする
#### Subscribe
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](http://reactivex.io/)
JSに限らず、いろんな言語に移植されている。
概念やインタフェース等は各言語の移植後でも共通しているようである。

### 400ms以内にトリプルクリックしたときにランダム値
そしてもう一度サンプルへ

```js
// 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);
  });

```

![2018-09-28_bufferwhen.gif](https://qiita-image-store.s3.amazonaws.com/0/103475/dea6af4c-1b01-004f-eb65-0aa2f5163c2d.gif)


### シリアル通信に似ている気がする
共感してくれる人がいるはず


<img width="746" alt="image" src="https://user-images.githubusercontent.com/10850034/46265378-e4259280-c560-11e8-96f0-cbe0211791ee.png">

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

<img width="742" alt="image" src="https://user-images.githubusercontent.com/10850034/46265373-d839d080-c560-11e8-8fc7-3027e04590cb.png">

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

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

などなどの作用がある

<img width="743" alt="image" src="https://user-images.githubusercontent.com/10850034/46265388-fd2e4380-c560-11e8-8bc3-3626df8ac951.png">

### 他ライブラリとの違い

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

と、言われている


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

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

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