mergeMapはmap+subscribeと考えるとわかりやすい
以下の例ではストリームの中にストリームを作成しているため、中の値を取り出すのに２回subscribeが必要となってしまっています。
import { of, from } from 'rxjs';
import { map, delay } from 'rxjs/operators';
const getData = (param) => {
return of(`retrieved new data with param ${param}`).pipe(
delay(1000)
)
}
from([1,2,3,4]).pipe(
map(param => getData(param))
).subscribe(val => val.subscribe(data => console.log(data)));
そこで、mergeMapの出番です。
import { of, from } from 'rxjs';
import { map, delay } from 'rxjs/operators';
const getData = (param) => {
return of(`retrieved new data with param ${param}`).pipe(
delay(1000)
)
}
from([1,2,3,4]).pipe(
mergeMap(param => getData(param))
).subscribe(val => console.log(val));
mergeMapがmapを実行した後に内側のストリームと外側のストリームをマージしてくれます。
map+subscribeと考えると分かりやすいと思います。
以下の記事を参考にさせていただきました。