24 Jul 2024
5 min

combineLatest – RxJS Reference

combineLatest

combineLatest allows to merge several streams by taking the most recent value from each input observable and emitting those values to the observer as a combined output (usually as an array). The operators caches the last value for each input observable and only once all input observables produced at least one value it emits the combined cached values to the observer.

The resulting stream completes when all inner streams complete and will throw an error if any of the inner streams throws an error. It will never complete if any of the inner streams doesn’t complete. On the other hand, if any stream does not emit value but completes, resulting stream will complete at the same moment without emitting anything, since it will be now impossible to include value from completed input stream in resulting sequence. Also, if some input stream does not emit any value and never completes, combineLatest will also never emit and never complete, since, again, it will wait for all streams to emit some value.

The operator works in the following way:

  1. Subscribe to all input observables
  2. When a source observable emits a value, override any existing value in the cache for this observable
  3. If here’s a cached value for each obsevable in the cache, emit the combined values to the observer
  4. Only after all source observables complete, send the complete notification to the observer.
  5. If any of the source observables throws an error, send the error notification to the observer.

In the diagram below you can see the combineLatest operator combining two streams A and B. As soon as all streams have emitted at least one value each new emission produces a combined value through the result stream:

combineLatest operator diagram

Here is the code example that demonstrates the setup shown by the above diagram:

const a = stream('a', 200, 3);
const b = stream('b', 500, 3);

combineLatest(a, b).subscribe(fullObserver(operator));

And the editable demo:

Usage

This operator can be useful if you need to evaluate some combination of state which needs to be kept up-to-date when part of the state changes. A simple example would be a monitoring system. Each service is represented by a sequence that returns a Boolean indicating the availability of a said service. The monitoring status is green if all services are available so the projection function should simply perform a logical AND.

Additional resources

See also

Share this post

Sign up for our newsletter

Stay up-to-date with the trends and be a part of a thriving community.