Renátó Bogár
Renato's blog

Renato's blog

RxJS Pt. 7 - Combining Data Streams

RxJS Pt. 7 - Combining Data Streams

Renátó Bogár's photo
Renátó Bogár
·May 29, 2022·

4 min read

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

  • combineLatest
  • forkJoin
  • withLatestFrom

There are several types of RxJS combination operators and creating functions. Screenshot 2022-05-28 at 9.37.31.png

  • One type combines items emitted from multiple Observables into a single Observable result. In the first draw the emitted letters are merged with emitted numbers into a single set of emitted letters and numbers. merge and concat are examples of this type. This type is often used when the data is uniform, merging current customers with potential costumers for example.
  • Another type simplifies complex emissions, such as arrays, flattening the values into a new Observable. Hence, operators of this type are often called flattening operators. Here, the arrays emitted from the source Observable are flattened, reducing the array to its individual elements. Those individual array elements are emitted into a single result observable. The mergeAll operator is an example of this type
  • The last type are those that combine values from multiple Observables emitting an array of combined values into a single result Observable.

combineLatest

combileLatest([a$,b$,c$])

combineLatest creates an observable whose values are defined using the latest values of each input Observable. In the example above, we create a single output Observable from the three input Observables. Each time any of the Observables emit, the latest value from each Observable is combined into an array and emitted to the output Observable. CombineLatest is a static creation function, not a pipeable operator.

Screenshot 2022-05-29 at 14.11.27.png If you look at the picture above, you can see that the first emitted value of the Observable contains the last emitted value from each of the Observables in order as elements in an array. So if 75 is emitted, combineLatest takes the latest values from each Observable. And as you can see in the picture, combineLatest does not emit anything until all the observables have emitted at least one value. This way the output array always contains the same number of elements.

combineLatest is a combination function. You could use combineLatest when you work with multiple data sets, or want to reevaluate state when an action occurs.

forkJoin

forkJoin([a$,b$,c$])

forkJoin creates an Observable whose value is defined using the last value from each input Observable. In the code above we create a single output Observable from three input Observables. The output Observable emits only one time.

Screenshot 2022-05-29 at 14.23.28.png When the input Observables complete, the last value from each Observable is combined into an array and emitted to the output Observable. It is a static creation function, not a pipeable operator

forkJoin is a combination function You could use forkJoin to wait to process any results until all Observables are complete, or when emitting individual items you would like emitted as single array. Do not use when working with Observables that do not complete - such as actions streams.

withLatestFrom

a$.pipe(withLatestFrom(b$,c$))

Like combineLatest, withLatestFrom creates an Observable whose values are defined using the latest value from each input Observable. But uniquely to withLatestFrom, it only emits when the source Observable emits. In the code above, we combine the source Observable, a$ with two other input Observables and create one output Observable with the latest value from each of the combined Observables. But the combined Observables only emit to the output Observable when the source Observable a$, emits. So like your older sibling, the source Observable is in charge, and the combined Observables will not emit to the result unless that source emits. withLatestFrom is a pipeable operator.

Screenshot 2022-05-29 at 16.01.20.png

We have three Observables as you can see even if the second or the third Observable(b$,c$) creates a new value, the output Observable not emits. It only emits if the first Observable(a$) emits. But if you look at the picture you can see that the Observable did not emit on the first time the source Observable emit. This is because withLatestFrom waits until all the input Observables emit at least once.

withLatestFrom is a combination operator. You could use withLatestFrom to react to changes in only one Observable or to regulate the output of other Observables.

Did you find this article valuable?

Support Renátó Bogár by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this