RxJS Operators: What, Why and When ?

Operator Function Flow
  1. of (Creation Operator)
  2. from (Creation Operator)
  3. map (Transformation Operator)
  4. switchMap (Transformation Operator)
  5. tap (Utility Operator)
  6. take (Filtering Operator)
const arr = [1, 2, 3];

const arr$ = of(arr);

arr$.subscribe((values) => console.log(`Emitted Values: `, values));
Emitted Values: [1, 2, 3]
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
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
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"}
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
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