Combining operators and static functions in RxJS 7

RxJS 7.0.0 is out! Here is a focus on the changes for combining operators. To learn more about this release read the breaking changes and the CHANGELOG.md.

Overview

combineLatest vs combineLatestWith and zip vs zipWith in RxJS 7:

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:

// Deprecated in RxJS 6 and RxJS 7
// Will be removed in RxJS 8
import {
  concat,
  combineLatest,
  race,
  zip,
} from "rxjs/operators";

// Deprecated examples:
// a$.pipe(combineLatest(b$));
// a$.pipe(zip(b$));

// Replacements in RxJS 7
// *With
import {
  concatWith,
  combineLatestWith,
  raceWith,
  zipWith,
} from "rxjs/operators";

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

New argument types for static functions

Dictionary of Observables

The static creation function combineLatest now supports a dictionary of Observables, 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}

Array 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]