RxのFlatMapをサクッと理解する

RxのFlatMapについて、理解するまでちょっと戸惑ったので忘備録。

FlatMapとは

公式に書いてあることをまとめると以下のようになります。

1. observableに送られてきた値の一つ一つに対し、その値を元に新たなobservableを作成する関数を当てる
2. 上で作成された複数のobservableを一つのobservableにマージする

1. observableに送られてきた値の一つ一つに対し、その値を元に新たなobservableを作成する関数を当てる

例えば以下のobservableがある時、

const originalObservable =  Rx.Observable.of(1, 2, 3);

originalObservableに送られた3つのそれぞれの値から更にobservaleを作るような以下の関数を用意します。

const getNewObservable = (value) => {
    return Rx.Observable.of(value+ "A", value+ "B", value+ "C"); 
}

これにより、以下のような三つのobservableが作られます。

1. Rx.Observable.of("1A", "1B", "1C") <= 1が送られてきた時
2. Rx.Observable.of("2A", "2B", "2C") <= 2が送られてきた時
3. Rx.Observable.of("3A", "3B", "3C") <= 3が送られてきた時

2. 作成された複数のobservableを一つのobservableにマージする

上記で作成された複数のobservableを一つのobservableにマージした時に送られてきた値は以下のようになります

"1A"
"1B"
"2A"
"1C"
"2B"
"3A"
"2C"
"3B"
"3C"

全体の検証コードは以下のようになります

const originalObservable =  Rx.Observable.of(1, 2, 3);

const getNewObservable = (value) => {
    return Rx.Observable.of(value+ "A", value+ "B", value+ "C"); 
}

const flatMapped = originalObservable
  .flatMap(getNewObservable);

function test() {
  flatMapped.subscribe(val => {
    console.log(val);
  });
}

CodePenはここから