RxJs combination operators
It’s been a while since I started to play with and explore RxJS library. I must say, although the learning is little steep and took some time to wrap my head around the new terms(observables, subscriptions…), it’s worth it.
In particular, the combination operators seemed to be difficult for me to understand initially. I will share some key points here, which might help one to get a clear idea on how to make sense of these operators.
I am going to share the references that I have followed at the end of this article.
All the operators I’m going to discuss below are applicable to higher order observables. If you don’t know, what a higher order observable is, you can refer one of the links below. But, my suggestion is to dive into looking at any one of the below operators inner workings, and then it becomes easy to understand what a higher order observable is.
Basically, it’s an observable of observables, as they say, just like higher order functions. There is another term called flattening, which means subscribing to all the inner observables, based on the operator used.
CombineAll —
- Creates an inner observable, mapping the value from each emission of outer observable.
- Subscriptions to inner observables only happen when the outer observable is complete.
- You see emission start to happen from the subscription of the outer observable, only when all the inner observables emits at least one value.
- Emission from the outer observable happens, when any of the inner observable emits a value.
- The values emitted will be an array with each element of the array being the latest value from the observables. (applies combineLatest strategy)
For example, you will start to see array of values being logged in the console, only after 5 seconds.
const outer = of(1000, 5000);const combined = outer.pipe(
map((val) => {
return interval(val).pipe(take(2))
}),
combineAll()
)combined.subscribe(console.log)#output
[1, 0] //After 5 seconds
[1, 1] //After 10 seconds
ConcatAll —
- Creates an inner observable, mapping the value from each emission of outer observable. If you have three emissions from outer observable, you will have three inner observables.
- Unlike combineAll, subscriptions to inner observables happen in order of their creation. Not necessary for the outer observable to complete.
- The subscription to an inner observable happens only after the previous observable completes.
I take the same example, but replaces combineAll with concatAll.
const outer = of(1000, 5000);const combined = outer.pipe(
map((val) => {
return interval(val).pipe(take(2))
}),
concatAll()
)combined.subscribe(console.log)#output
0 //After 1 second
1 //After 2 seconds
0 //After 7 seconds
1 //After 12 seconds
Another interesting example
MergeAll —
- Creates an inner observable, mapping the value from each emission of outer observable.
- Subscribes to inner observables as soon as they are created.
- There is no combination or emission logic, as soon as the inner observables are subscribed to(flattening), the values from all the observables are emitted looking like they are emitted from a single stream.
const outer = of(1000, 5000);const combined = outer.pipe(
map((val) => {
return interval(val).pipe(take(2))
}),
mergeAll()
)combined.subscribe(console.log)#output
0 //After 1 second
1 //After 2 seconds
0 //After 5 seconds
1 //After 10 seconds
Thank you. I hope you have learnt something from this article !! I will share few more operators in my next article. Until then, have fun with these operators.
References:
