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

Receive my latest news about Reactive Programming, free deck samples and RxJS tips:

Learn Reactive Programming and stay up-to-date: