RxJS Operators: What, Why and When ?

The full form of RxJS is Reactive Extension for Javascript. It is a javascript library that uses observables to work with reactive programming that deals with asynchronous data calls, callbacks and event-based programs. RxJS can be used with other Javascript libraries and frameworks, it is defined as a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array#extras (map, filter, reduce, every, etc.) to allow handling asynchronous events as collections.

An Operator is a function which creates a new Observable based on the current Observable. This is a pure operation: the previous Observable stays unmodified.

Operator Function Flow

of: The of Operator is a creation Operator. Creation Operators are functions that create an Observable stream from a source.

const arr = [1, 2, 3];

const arr$ = of(arr);

arr$.subscribe((values) => console.log(`Emitted Values: `, values));
Emitted Values: [1, 2, 3]

from: The from operator turns an Array, Promise, or Iterable, into an Observable. This operator will convert a promise to an Observable, allowing it to be handled in a more reactive manner. When the Promise resolves or rejects, a complete notification will be sent to the subscriber.

const arr = [1, 2, 3];

const arr$ = from(arr);

arr$.subscribe((values) => console.log(`Emitted Values: `, values));
Emitted Values:  1
Emitted Values: 2
Emitted Values: 3

Here we can see that, from Operator took each number and emitted it as a value. The subscriber received each value in sequence and called “console.log” 3 times.

map: The map operator is a Transformation Operator. It takes values from one Observable, transforms them, and creates an new Observable that emits the transformed values.

const arr = [1, 2, 3];

const fromArr$ = from(arr);

fromArr$
.pipe(map((value) => value + 10))
.subscribe((value) => console.log(`Emitted Values: `, value));
Emitted Values:  11
Emitted Values: 12
Emitted Values: 13

switchMap: It’s another transformation operator which means the it will piped through an Observable and then will modify or transform the resultant value. The switchMap receives the values emitted by an Observable, and then returns a new Observable from a different source.

const userDetails$ = from(this.userService.getActiveUserID())
.pipe(switchMap(id => this.userService.fetchUserForID(id)))
.subscribe(user => console.log("Found user ", user));
Found user  {id: 1, name: "Test User", email: "test@test.com"}

It’s worth noting that the switchMap operator will cancel any in-flight network requests if it receives a new value from the original Observable stream (source), making it a great candidate for type ahead search implementations.

tap: The tap operator is a utility operator that returns an observable output that is identical to the source observable but performs a side effect for every emission on the source observable.

const arr = [1, 2, 3];

const fromArr$ = from(arr);

fromArr$
.pipe(tap((value) => console.log("Received value: ", value)))
.subscribe((value) => console.log(`Emitted Values: `, value));
Received value:  1
Emitted Values: 1

Received value: 2
Emitted Values: 2

Received value: 3
Emitted Values: 3

take: The take operator is a Filtering Operator. Filtering Operators allows you to select how and when to accept values emitted from the Observables.

const arr = [1, 2, 3];

const fromArr$ = from(arr);

fromArr$
.pipe(take(1))
.subscribe((value) => console.log(`Emitted Values: `, value));
Emitted Values:  1

Happy Coding !!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store