DEV Community: Deborah Kurata

RxJS Operator: switchMap

Deborah Kurata — Thu, 19 Aug 2021 21:14:27 +0000

The switchMap RxJS Operator is a higher-order mapping operator that processes an emitted value but if another value is emitted, it will cancel that processing and switch over to the new value.

For example:

products$ = this.categorySelected$
  .pipe(
       switchMap(catId=>
            this.http.get<Product[]>(`${this.url}?cat=${catId}`))
  );

In the above code, the switchMap will perform the HTTP get for the selected category. If a different category is selected, it will cancel that HTTP get request and perform an HTTP get for the newly selected category.

How Does switchMap Work?

We can think of the switchMap like a coach that can't decide which runner should run in a race. But ultimately, only their last choice will run.

Let's look at an Example

In this example, the user clicks the category with an id of 2, changes their mind and picks 3, then decides they really want category 1.

Following the numbers on the screen shot above:

The switchMap issues a get request for category 2,
then cancels that request and issues a get request for category 3,
then cancels that request and issues a get request for category 1.
Only the result for category 1 is emitted.

For this specific example, where the user can change their mind on the selected category, using switchMap is often the best choice. It will immediately react to the user's selection.

When Should We Use switchMap?

The switchMap operator is great for responding to user actions, such as this example of the user selecting a product category. It can then switch as the user changes their mind.

Also great for typeahead functionality.

RxJS Operator: mergeMap

Deborah Kurata — Thu, 19 Aug 2021 21:08:56 +0000

The mergeMap RxJS Operator is a higher-order mapping operator that processes each emitted value as it is emitted and returns the results as soon as they are available, which may not be in the order of the requests.

For example:

products$ = this.categorySelected$
  .pipe(
       mergeMap(catId=>
            this.http.get<Product[]>(`${this.url}?cat=${catId}`))
  );

In the above code, the mergeMap will perform the HTTP get as soon as an Id is emitted from this.categorySelected$. When another Id is emitted, that request is performed concurrently.

How Does mergeMap Work?

We can think of the mergeMap like the 800 m race: the runners all start at the same time. And they will finish the race as quickly as they can. The order of the finish won't necessarily be the order they started.

Let's look at an Example

In this example, the user clicks the category with an id of 2, changes their mind and picks 3, then decides they really want category 1.

Following the numbers on the screen shot above:

The mergeMap issues a get request for category 2,
when emitted, it issues a get request for category 3,
when emitted, it then issues a get request for category 1.
The result is emitted as soon as the response is returned.
In the above example, the response for category 3 returns first,
the response for category 1 returns next,
and lastly the response for category 2 returns.

For this specific example, where the user can change their mind on the selected category, using mergeMap doesn't make sense. As shown in the above example, the last returned result may not be related to the most recent selection. (The user picked 1 last, but they now see the result for category 2.)

When Should We Use mergeMap?

The mergeMap is great for related data. Say we had a set of customer Ids and we wanted to get the detail for all of them, in no particular order. Using a mergeMap will get the data for all of them concurrently, providing a more performant user experience than getting them sequentially, one at a time, as with concatMap.

RxJS Operator: concatMap

Deborah Kurata — Thu, 19 Aug 2021 20:58:41 +0000

The concatMap RxJS Operator is a higher-order mapping operator that processes each emitted value in order and waits for its inner Observable to complete before processing the next item.

For example:

products$ = this.categorySelected$
  .pipe(
       concatMap(catId=>
            this.http.get<Product[]>(`${this.url}?cat=${catId}`))
  );

In the above code, the concatMap will perform the HTTP get and wait for the response before processing the next item emitted from this.categorySelected$.

How Does concatMap Work?

We can think of the concatMap like a relay race: the next runner can't start until the prior runner completes. And the runners cannot run out of sequence.

Let's look at an Example

In this example, the user clicks the category with an id of 2, changes their mind and picks 3, then decides they really want category 1.

Following the numbers on the screen shot above:

The concatMap issues a get request for category 2,
waits for the response,
then issues a get request for category 3,
waits for the response,
then issues a get request for category 1,
and waits for the response.

For this specific example, where the user can change their mind on the selected category, using concatMap doesn't make sense. It takes too long for each selection to be processed and returns results that are no longer needed.

When Should We Use concatMap?

The concatMap is great for things like updates or deletes where you want to ensure that each request completes before the next one begins.

It's also great any time that the request/response order matters.

Higher-Order Mapping Operators

Deborah Kurata — Thu, 19 Aug 2021 20:47:02 +0000

Higher-order mapping operators are used to map inner Observables. They include:

concatMap
mergeMap
switchMap

Each higher-order mapping operator:

Automatically subscribes to the inner Observable
Flattens the resulting Observable, returning Observable<T> instead of Observable<Observable<T>>
Automatically unsubscribe from the inner Observable

For example:

products$ = this.categorySelected$
  .pipe(
       switchMap(catId=>
            this.http.get<Product[]>(`${this.url}?cat=${catId}`))
  );

In this code, every time the user selects a new category, this.categorySelected$ emits the id of the selected category. That id is piped through a higher-order mapping operator (switchMap in this case). The switchMap automatically subscribes to the inner Observable, flattens the result (emitting an array of type Product[] instead of Observable<Product[]>), and unsubscribes from the inner Observable.

Additional posts in this series look more closely at several higher-order mapping operators and when to use which.

Inner Observables and Higher Order Mapping

Deborah Kurata — Thu, 19 Aug 2021 20:00:23 +0000

When first starting out with RxJS, I didn't know what an "inner Observable" was, which made it difficult to fully understand the RxJS documentation. So, what is an inner Observable?

When working with Observables, the Observable we are acting on is the outer Observable. The this.categorySelected$ Observable in the above example is an "outer Observable". We can pipe its emitted items through a pipeline of operations using the pipe method.

If any of those operations return an Observable, that returned Observable is the "inner Observable". The http get request in the above example is an "inner Observable".

In our code, we subscribe to the declared Observable, products$ in this example, either with an explicit subscribe or with the async pipe in our template. Subscribing to the declared Observable automatically subscribes to the outer Observable, which is this.categorySelected$ above.

But how do we subscribe to the inner Observable? How do we unsubscribe?

One option is to do something like this:



// Anti-Pattern!
this.sub = this.categorySelected$.subscribe(catId=>
  this.http.get<Product[]>(`${this.url}?cat=${catId}`)
    .subscribe(result => this.products = result)
);

In the above code we explicitly subscribe to the outer Observable. Within the next function passed into the subscribe, we subscribe to the inner Observable. We can use this.sub to unsubscribe from the outer Observable, but using the above code, we have no way to unsubscribe from the inner Observable.

This type of code, with nested subscribes, is not recommended. It is often defined as an "anti-pattern", that is a pattern of code that is not recommended and should be refactored.

So how do you subscribe to those inner Observables? That's the purpose of the RxJS higher-order mapping operators. We'll cover three of the common higher-order mapping operators in upcoming posts:

concatMap
mergeMap
switchMap

All the best!

Links to My Content

Deborah Kurata — Thu, 19 Nov 2020 22:18:29 +0000

I'm often asked for links to specific topics, and thought it useful to centralize the list in one location.

Here are a set of links to my talks, podcasts, and other external content, organized by topic. Links to my Pluralsight courses are listed in a separate section at the end.

RxJS in Angular

YouTube Playlist

Angular Community Meetup: "Reactive Programming with RxJS: Terms, Tips, & Techniques" (April 19, 2022)

ng-Poland "RxJS in Angular: Terms, Tips, and Techniques" (January 2022)

Enterprise NG "Designing Reactive Angular Components (RxJS)" (December 2021)

Angular World Tour (Sussex) "Reactive Programming with RxJS: Terms, Tips and Techniques" (November 2021)

Angular World Tour (Memphis) "Reactive Programming with RxJS" (October 2021)

Angular World Tour (Athens) "Reactive Programming with RxJS" (September 2021)

Angular World Tour (Kansas City) "RxJS Terms, Tips, and Techniques" (July 2021)

RxJS Live! Asia Conference "RxJS in Angular: Pipeline Patterns" (April 2021)

ng-conf "4 Wicked RxJS Pipelines for the Real World" (April 2021)

Pluralsight Tech Skills Day 2021 (April 2021)

Video

Angular Utah Meetup "RxJS Terms and Patterns" (January 2021)

YouTube video (My talk is 45 minutes)

Ng-SriLanka "RxJS Terms, Tips, and Techniques" (December 2020)

Enterprise NG "RxJS Patterns in Angular" (November 2020)

DevReach 2.0 Day 4 Angular Relay (October 2020)

The Angular Show (Spotify) Episode #32 - "State Management pt. 4 - RxJS & Singleton Services" (September 2020)

Angular International Women's Day "RxJS Action and Data Streams: A Love Story" (August 2020)

ng-India "RxJS in Angular: Action and Data Streams" (August 2020)

Real Talk JavaScript Episode #91 - "Solving Common RxJS Scenarios in Angular with Deborah Kurata" (July 2020)

ngconf: Hardwired "Why Should You Care About RxJS Higher-order Mapping Operators?" (June 2020)

ng Malasia "Collect, Combine, and Cache RxJS Streams for User-Friendly Results" (August 2019)

ngconf "Data Composition with RxJS" (May 2019)

Adventures in Angular Episode #237 - "More on RxJS with Deborah Kurata" (April 2019)

Pluralsight Courses

Angular Courses

Angular: Getting Started

Angular: Reactive Forms

Angular Routing

RxJS in Angular: Reactive Development

Angular NgRx: Getting Started

Angular Component Communication

C# Courses

Object-Oriented Programming Fundamentals in C#

C# Best Practices: Improving on the Basics

C# Best Practices: Collections and Generics

Defensive Coding in C#

Other

Tiaras and Tech Podcast "Technical Management: Lessons Learned with Deborah Kurata" (November 2021)

All Hands on Tech "Andrew Yang and Deborah Kurata talk tech skills with Hank Green" (April 2020)

RxJS Tip: Creation Function: fromEvent()

Deborah Kurata — Tue, 17 Nov 2020 19:36:19 +0000

The RxJS fromEvent is a creation function that emits events.

How Does It Work?

The fromEvent creation function takes in an event target object and event type string, creates an Observable, and emits the specified events as they occur.

It works with any document object model (DOM) element, such as buttons, input elements, and the document itself.

Find the list of valid event types in the Mozilla docs here.

The above example watches for click events on the myInput element.

Each click event is emitted and logged to the console.

How About Some Examples?

This example watches for click events anywhere on the document (web page). When a click event is emitted, it's x and y coordinates are logged.

// Click event on the document page
fromEvent(document, 'click').subscribe(
    (x: MouseEvent) => console.log(`x: ${x.x}, y: ${x.y}`)
);

The following example first locates the element with an id of name. It then watches for keyup events in the name element. Each keyup event is emitted and it's key code is logged to the console.

// Keyup event on an input element
var input = document.getElementById('name');
fromEvent(input, 'keyup').subscribe(
    (x: KeyboardEvent) => console.log(`key: ${x.code}`)
);

Here is a more complete Angular example. In the template, it uses a template reference variable (filterInput) on an input element.

Template

<input type='text' #filterInput/>

In the component, it uses the ViewChild decorator to locate the element using the template reference variable (filterInput). In the ngAfterViewInit lifecycle hook method, it uses the fromEvent creation function, passing in the found element and the desired event (keyup).

Component

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { fromEvent } from 'rxjs';
@Component({
  templateUrl: './product-list.component.html'})
export class ProductListComponent implements AfterViewInit {
   @ViewChild('filterInput') filterElementRef: ElementRef;

   ngAfterViewInit(): void {
    fromEvent(this.filterElementRef.nativeElement, 'keyup').subscribe(
      (x: KeyboardEvent) => console.log(`key: ${x.code}`)
    );
  }
}

Note that there are often more "Angular" ways to accomplish event handling using event binding. Consider using event binding as a first choice and only use fromEvent if event binding doesn't provide the features you require.

What Are Some Common Uses?

Here are some common uses of the fromEvent creation function.

Tracking and responding to click events.

fromEvent(document, 'click')

Tracking and responding to keyboard events.

fromEvent(input, 'keyup')

Tracking and responding to clipboard events.

fromEvent(document, 'paste')

Where's the Code?

Here is a link to sample code demonstrating the fromEvent creation function. Feel free to fork it and try it out.

What About the Marble Diagram?

This is the fromEvent creation function shown on a marble diagram:

Thanks to @michael_hladky for this marble diagram.

Do you have another common use of fromEvent? If so, please leave a comment.

Enjoy!

RxJS Tip: Creation Function: from()

Deborah Kurata — Mon, 16 Nov 2020 23:37:39 +0000

The RxJS from function is a creation function that iterates an object and emits its values.

How Does It Work?

The from creation function can convert many kinds of things to an Observable. It can take in an array, a promise, or other iterable object. It creates an Observable, iterates the provided object emitting its values, and completes.

The Observable created with from is generally synchronous, meaning the values are iterated and emitted, and the Observable completes immediately after it is subscribed.

The above example passes an array of three strings to the from function and subscribes.

The from iterates the array, emitting each of the three array elements which are logged.

How About Some Examples?

This example iterates an array, emitting each of its elements.

// Array: Iterates and emits the elements
from([42, 72, 21]).subscribe(x => console.log(x)); // 42,72,21

The following example iterates the characters of a string.

/ String: Iterates and emits the characters
from('Apple1').subscribe(x => console.log(x)); // A,p,p,l,e,1

This example emits the result of a promise.

// Promise: Emits the fulfilled result of the promise
const p = new Promise( ( resolve, reject ) => {
  resolve( "Apple1" );
  reject( "Error" );
} );
from(p).subscribe(x => console.log(x)); // Apple1

What Are Some Common Uses?

In addition to converting other structures to Observables, here are some common uses of the from creation function.

Sample code to try out a pipeline of operations when working with an array.

from([1, 2, 3])

User selects items for processing (ids of products in a cart, ids of selected songs for a playlist, etc.), managed as an array.

from([45, 72, 21])

Where's the Code?

Here is a link to sample code demonstrating the from creation function. Feel free to fork it and try it out.

What About the Marble Diagram?

This is the from creation function shown on a marble diagram:

Thanks to @michael_hladky for this marble diagram.

Do you have another common use of from? If so, please leave a comment.

Enjoy!

RxJS Tip: Creation Function: of()

Deborah Kurata — Mon, 16 Nov 2020 23:08:07 +0000

The RxJS of function is a creation function that emits specified values.

How Does It Work?

The of creation function takes in a set of values, creates an Observable that emits those values, and completes.

The Observable created with of is synchronous, meaning the values are emitted and it completes immediately after it is subscribed.

The above example passes three strings to the of function and subscribes.

Each of the three strings are then emitted and logged.

What Are Some Common Uses?

Sample code to try out a pipeline of operations.

of(1, 2, 3)

User selects items for processing (ids of products in a cart, ids of selected songs for a playlist, etc.) and those items are emitted from an Observable.

of(45, 72, 21)

For branching when one branch returns an Observable and another returns a static value as an Observable (such as null, an empty array, or an initialized value).

of(null)
of({})
of(this.initializedProduct())

As a more concrete example of branching:

  getProduct(id: number): Observable<Product> {
    if (id === 0) {
      return of(this.initializeProduct()); // <-- of() used here
    }
    const url = `${this.productsUrl}/${id}`;
    return this.http.get<Product>(url)
      .pipe(
        tap(data => console.log(JSON.stringify(data))),
        catchError(this.handleError)
      );
  }

This ensures that each branch returns an Observable.

NOTE: This example is meant to show usage of of() and is NOT meant to show the best technique to accomplish this objective.

Where's the Code?

Here is a link to sample code demonstrating the of creation function. Feel free to fork it and try it out.

What About the Marble Diagram?

This is the of creation function shown on a marble diagram:

Thanks to @michael_hladky for this marble diagram.

Do you have another common use of of? If so, please leave a comment.

Enjoy!

RxJS Tip: Use a Creation Function

Deborah Kurata — Mon, 16 Nov 2020 22:34:22 +0000

Some of the Angular features, such as Http, automatically create and return Observables. But in some cases, you may want to create your own Observables.

Create your own Observable using a creation function.

What Is a Creation Function?

A creation function is an RxJS library function that takes in arguments and returns an Observable.

You can create an Observable from a set, an array, a timer, keyboard events, mouse events, and much more.

This series covers the more common creation functions.

RxJS Tip: Understand the Terminology: Observer

Deborah Kurata — Mon, 16 Nov 2020 21:41:59 +0000

We've discussed Observable and Subscription. Another key RxJS concept is Observer.

What Is an Observer?

An Observer watches for emissions and notifications from an Observable after a consumer subscribes to that Observable.

An Observer defines an interface with callback functions for each type of Observable notification: next, error, and complete.

Use the next callback to process the emitted item.
Use the error callback to implement exception handling.
Use the complete callback to perform cleanup when the Observable is complete. (This is not used often in an Angular application.)

How Do You Define an Observer?

There are several ways to define an Observer.

Explicitly (Uncommon)

Though not common, you can define an Observer explicitly by creating an object with three callback functions: next, error, and complete.

// Define an explicit observer (uncommon)
const observer = {
  next: apple => console.log(`Apple was emitted ${apple}`),
  error: err => console.log(`Error occurred: ${err}`),
  complete: () => console.log(`No more apples, go home`)
};

The next method argument is the emitted item. The arrow function specifies what to do with that item. In this case, we are simply logging it to the console.

The error method argument is the error emitted when an error occurs. The arrow function specifies what to do with the error notification. In this case, we are logging the error to the console.

The complete method has no argument. The arrow function defines what to do when the Observable is complete. In this case, it logs a message to the console.

We then pass that Observer object into the Observable subscribe method to react to the Observable's emissions and notifications.

// Pass the Observer into the subscribe (uncommon)
const sub = source$.subscribe(observer);

Pass a Single Callback

It is more common to pass the Observer callback functions directly into the Observable subscribe method.

You can only pass one object to the subscribe method.

If you only need the next callback, pass it directly as the subscribe argument.

// Pass the next callback function directly
const sub = source$.subscribe(
   apple => console.log(`Apple was emitted ${apple}`)
);

Pass an Observer Object

Since you can only pass one object to subscribe, if you need to handle multiple types of notifications, pass an Observer object with the desired set of callbacks.

// Pass an Observer object with callback arrow functions
const sub = source$.subscribe({
  next: apple => console.log(`Apple was emitted ${apple}`),
  error: err => console.log(`Error occurred: ${err}`),
  complete: () => console.log(`No more apples, go home`)
});

Notice that the above code passes an object into the subscribe method with next, error, and complete methods. You only need to specify the methods for the notifications you'll handle. So if you don't need to process the complete notification, you don't need to specify it.

What if You Don't Want to Use Arrow Functions?

The prior examples all used arrow functions, denoted with =>. Some developers may prefer to use declared named functions instead of arrow functions when defining Observer callbacks. Like this:

const sub = source$.subscribe({
  next(apple) { console.log(`Apple was emitted ${apple}`) },
  error(err) { console.log(`Error occurred: ${err}`)},
  complete() { console.log(`No more apples, go home`)}
});

Notice the syntax difference. Here we define each function (next) with it's parameter (apple) and function body denoted with {}.

But watch out for this. In TypeScript (and in JavaScript), this is scoped to the function. So if you have code like the following:

// Watch out for `this`
const sub = source$.subscribe({
  next(apple) { this.apple = apple }, // Does NOT reference the 
                                      // class-level variable
  error(err) { console.log(`Error occurred: ${err}`)},
  complete() { console.log(`No more apples, go home`)}
});

It may not work as expected. The this.apple will not reference a class-level variable and will instead define a function-scoped variable.

How Do the Pieces Fit Together?

The Observable, Observer, and Subscription work together to:

Tell the Observable to start emissions/notifications
Provide callback functions to react to those emissions/notifications
Set up a subscription that allows for unsubscribing

Here are the concepts shown on a more formal marble diagram.

Thanks to @michael_hladky for this marble diagram.

Here is a more common example usage in an Angular application.

Service

  products$ = this.http.get<Product[]>(this.productsUrl)
    .pipe(
      tap(data => console.log(JSON.stringify(data))),
      catchError(this.handleError)
    );

In the above code, products$ represents the Observable.

It is a common practice to add a $ suffix to a variable that represents an Observable. This makes it easier to see when the code is working with an Observable.

Component

ngOnInit(): void {
  this.sub = this.productService.products$.subscribe({
      next: products => this.products = products,
      error: err => this.errorMessage = err
    });
}

In the component, the Observer object is passed into the subscribe method, defining two callbacks: next and error.

The this.sub represents the Subscription returned from the subscribe method. This is used to unsubscribe on ngOnDestroy.

I hope that clarified the meaning of the term Observer and demonstrates how three key RxJS concepts: Observable, Subscription, and Observer work together.

RxJS Tip: Understand the Terminology: Subscription

Deborah Kurata — Mon, 16 Nov 2020 20:34:31 +0000

A key concept when using RxJS is Subscription.

What Is a Subscription?

A Subscription is an object that represents execution of an Observable.

Like the days of old when you couldn't get a newspaper delivered unless you subscribed, Observables don't do anything until a consumer subscribes.

For example, if your component (the consumer) wants to be notified when an Observable emits the response returned from an Http call, the component subscribes to that Observable.

How Do You Subscribe?

One way to subscribe to an Observable is with its subscribe method.

const sub = source$.subscribe();

That method tells the Observable to start emitting AND creates and returns a Subscription.

It's good practice to unsubscribe from any Observable you subscribe to.

How Do You Unsubscribe?

Use the unsubscribe method of a Subscription to unsubscribe. The unsubscribe method lets the Observable know that the consumer no longer wants to receive emissions or notifications.

const sub = source$.subscribe();

sub.unsubscribe();

Let's examine a more concrete example.

Here is an Http request in a service:

  products$ = this.http.get<Product[]>(this.productsUrl)
    .pipe(
      tap(data => console.log(JSON.stringify(data))),
      catchError(this.handleError)
    );

Here is the subscription in a component:

ngOnInit(): void {
  this.sub = this.productService.products$.subscribe(
     products => this.products = products
  );
}

Here is the unsubscribe in the component:

ngOnDestroy(): void {
  this.sub.unsubscribe();
}

Once Subscribed, How Do You Capture the Emissions/Notifications?

To perform an operation when an item is emitted from an Observable, an error occurs, or the Observable is complete, you need an Observer, discussed in a later tip.

I hope that's clarified the meaning of the term Subscription.

DEV Community: Deborah Kurata

RxJS Operator: switchMap

How Does switchMap Work?

Let's look at an Example

When Should We Use switchMap?

RxJS Operator: mergeMap

How Does mergeMap Work?

Let's look at an Example

When Should We Use mergeMap?

RxJS Operator: concatMap

How Does concatMap Work?

Let's look at an Example

When Should We Use concatMap?

Higher-Order Mapping Operators

Inner Observables and Higher Order Mapping

Links to My Content

RxJS in Angular

Other Angular Topics

Pluralsight Courses

Angular Courses

C# Courses

Other

RxJS Tip: Creation Function: fromEvent()

How Does It Work?

How About Some Examples?

What Are Some Common Uses?

Where's the Code?

What About the Marble Diagram?

RxJS Tip: Creation Function: from()

How Does It Work?

How About Some Examples?

What Are Some Common Uses?

Where's the Code?

What About the Marble Diagram?

RxJS Tip: Creation Function: of()

How Does It Work?

What Are Some Common Uses?

Where's the Code?

What About the Marble Diagram?

RxJS Tip: Use a Creation Function

What Is a Creation Function?

RxJS Tip: Understand the Terminology: Observer

What Is an Observer?

How Do You Define an Observer?

Explicitly (Uncommon)

Pass a Single Callback

Pass an Observer Object

What if You Don't Want to Use Arrow Functions?

How Do the Pieces Fit Together?

RxJS Tip: Understand the Terminology: Subscription

What Is a Subscription?

How Do You Subscribe?

How Do You Unsubscribe?

Once Subscribed, How Do You Capture the Emissions/Notifications?