Pipeable operators - Build your own with RxJS!

Combining operators and static functions in RxJS 7

Overview

Here is combineLatest vs combineLatestWith and zip vs zipWith in RxJS 7:

Static functions Pipeable operators
import {
  combineLatest,
  zip,
} from "rxjs";
import {
  combineLatestWith,
  zipWith,
} from "rxjs/operators";
combineLatest([color, shade])
combineLatest(dictionary) // new
// renamed
color.pipe(combineLatestWith(shade))
zip(color, shade)
zip([color, shade]) // new
// renamed
color.pipe(zipWith(shade))

Notes:

  • forkJoin exists only as a static function.
  • withLatestFrom exists only as a pipeable operator.

Renamed pipeable operators

In RxJS 6, concat, combineLatest, race, zip pipeable operators were deprecated in favor of the static functions. In RxJS 7, these operators are renamed:

RxJS 6 RxJS 7
// Deprecated in RxJS 6
import {
  concat,
  combineLatest,
  race,
  zip,
} from "rxjs/operators";

// Deprecated examples:
// a$.pipe(combineLatest(b$));
// a$.pipe(zip(b$));
// Replacements in RxJS 7
import {
  concatWith,
  combineLatestWith,
  raceWith,
  zipWith,
} from "rxjs/operators";

// Examples:
// a$.pipe(combineLatestWith(b$));
// a$.pipe(zipWith(b$));

New argument types for static functions

Dictionaries

The static creation function combineLatest now supports dictionaries, like forkJoin:

import { combineLatest, forkJoin } from "rxjs";

const dictionary = {
  color: of("purple", "green"),
  shade: of(500, 300),
};
const combined = combineLatest(dictionary);
const joined = forkJoin(dictionary);
// Emitted value example: {color: "purple", shade: 500}

Arrays of observables

The static creation function zip now supports an array of observables, like forkJoin and combineLatest:

import { combineLatest, forkJoin, zip } from "rxjs";

const combined = combineLatest([color, shade]);
const joined = forkJoin([color, shade]);
const zipped = zip([color, shade]);
// Emitted value example: ["purple", 500]
Cédric Soulas Follow Hire me

Freelance Developer Advocate. Motion graphics with code. JavaScript and Elm. cedricsoulas.com

Subscribe to reactive.how newsletter

Join the Newsletter

Learn Reactive Programming and stay up-to-date:

Receive my latest news, product updates and programming visualizations. You can unsubscribe at any time.

Highlights

@CedricSoulas

Making an illustrated book!

The Illustrated Book of RxJS

Learn more →