Why do we need to use flatMap?
I am starting to use RxJS and I don't understand why in this example we need to use a function like flatMap
or concatAll
; where is the array of arrays here?
var requestStream = Rx.Observable.just('https://api.github.com/users');
var responseMetastream = requestStream
.flatMap(function(requestUrl) {
return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
});
responseMetastream.subscribe(url => {console.log(url)})
If someone can visually explain what is happening, it will be very helpful.
['a','b','c'].flatMap(function(e) {
return [e, e+ 'x', e+ 'y', e+ 'z' ];
});
//['a', 'ax', 'ay', 'az', 'b', 'bx', 'by', 'bz', 'c', 'cx', 'cy', 'cz']
['a','b','c'].map(function(e) {
return [e, e+ 'x', e+ 'y', e+ 'z' ];
});
//[Array[4], Array[4], Array[4]]
You use flatMap when you have an Observable whose results are more Observables.
If you have an observable which is produced by an another observable you can not filter, reduce, or map it directly because you have an Observable not the data. If you produce an observable choose flatMap over map; then you are okay.
As in second snippet, if you are doing async operation you need to use flatMap.
var source = Rx.Observable.interval(100).take(10).map(function(num){
return num+1
});
source.subscribe(function(e){
console.log(e)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.1/Rx.min.js"></script>
var source = Rx.Observable.interval(100).take(10).flatMap(function(num){
return Rx.Observable.timer(100).map(() => num)
});
source.subscribe(function(e){
console.log(e)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.1/Rx.min.js"></script>
When I started to have a look at Rxjs
I also stumbled on that stone. What helped me is the following:
- documentation from reactivex.io . For instance, for
flatMap
: http://reactivex.io/documentation/operators/flatmap.html - documentation from rxmarbles : http://rxmarbles.com/. You will not find
flatMap
there, you must look atmergeMap
instead (another name). - the introduction to Rx that you have been missing: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754. It addresses a very similar example. In particular it addresses the fact that a promise is akin to an observable emitting only one value.
-
finally looking at the type information from RxJava. Javascript not being typed does not help here. Basically if
Observable<T>
denotes an observable object which pushes values of type T, thenflatMap
takes a function of typeT' -> Observable<T>
as its argument, and returnsObservable<T>
.map
takes a function of typeT' -> T
and returnsObservable<T>
.Going back to your example, you have a function which produces promises from an url string. So
T' : string
, andT : promise
. And from what we said beforepromise : Observable<T''>
, soT : Observable<T''>
, withT'' : html
. If you put that promise producing function inmap
, you getObservable<Observable<T''>>
when what you want isObservable<T''>
: you want the observable to emit thehtml
values.flatMap
is called like that because it flattens (removes an observable layer) the result frommap
. Depending on your background, this might be chinese to you, but everything became crystal clear to me with typing info and the drawing from here: http://reactivex.io/documentation/operators/flatmap.html.