RxJS: Combining Operators

Photo by Daniele Levis Pelusi on Unsplash

In version 5.5, pipeable operators were added to RxJS. And in version 6, their non-pipeable namesakes were removed.

Pipeable operators have numerous advantages. The most obvious is that they are easier to write. A less obvious advantage is that they can be composed into reusable combinations.

Let’s have a look at how code can be simplified by combining operators.

Combining multiple operators

Debouncing user input — to avoid the execution of an operation every time the user presses a key — is a common use case for RxJS. And doing so usually involves the debounceTime and distinctUntilChanged operators.

If an app performs a lot of debouncing, combining the two into a single operator can be a worthwhile simplification.

Here’s one way the two operators can be combined:

debounceInput is a function that takes and returns an observable, so it can be passed to the Observable.prototype.pipe function, like this: valueChanges.pipe(debounceInput).