Use Higher Order Observables in RxJS Effectively

58 minutes

If you have used RxJS Observables, it is likely you have seen the flatMap or switchMap operators. They are very powerful operators that can be used in various situations, while being common for dealing with HTTP requests. These operators may look mysterious at first, but turn out to be simple flattening operations on higher order Observables.

In this course you will learn what is a higher order Observable, when does it occur in real applications, and how to handle them with operators like switchMap. Throughout this course we will see real applications of these operations.

Start following this course if you have some understanding of RxJS, but want to gain advanced skills in the art of using operators.

If you're new to RxJS, we highly recommend the Introduction to Reactive Programming using RxJS to begin with, and then RxJS Beyond the Basics: Operators in Depth to understand operators.

If you're an absolute beginner to the concept of Observable and async streams, we highly recommend starting with Jafar Husain's excellent introduction.

pro-course-rss-logo

PRO RSS Feed

Get started with higher order observables in RxJS

Flatten a higher order observable with RxJS switch

P

Flatten a higher order observable with mergeAll in RxJS

P

Flatten a higher order observable with concatAll in RxJS

P

Use RxJS switchMap to map and flatten higher order observables

P

Use RxJS mergeMap to map and merge high order observables

P

Use RxJS concatMap to map and concat high order observables

P

Use RxJS mergeMap for fine-grain custom behavior

P

Split an RxJS observable with window

P

Split an RxJS observable conditionally with windowToggle

P

Split an RxJS Observable into groups with groupBy

P

Use groupBy in real RxJS applications

P

Use switchMap as a safe default to flatten observables in RxJS

P
rx tutorial about Get started with higher order observables in RxJS

Get started with higher order observables in RxJS

4:35 rx

An Observable may emit values of any JavaScript type: numbers, strings, booleans, objects, etc. This means an RxJS Observable may also happen to emit values which are themselves observables too. In this lesson we will learn more about this use case and begin learning about the so-called "higher order observables".

rx tutorial about Flatten a higher order observable with RxJS switch

Flatten a higher order observable with RxJS switch

4:52 rx PRO

To consume the higher order RxJS Observable, we had to do a subscribe inside a subscribe. In this lesson, we will learn a better approach using flattening operators, of which switch() is a common and simple one.

rx tutorial about Flatten a higher order observable with mergeAll in RxJS

Flatten a higher order observable with mergeAll in RxJS

3:19 rx PRO

Among RxJS flattening operators, switch is the most commonly used operator. However, it is important to get acquainted with mergeAll, another flattening operator which allows multiple concurrent inner observables. In this lesson we will explore mergeAll in detail.

rx tutorial about Flatten a higher order observable with concatAll in RxJS

Flatten a higher order observable with concatAll in RxJS

3:22 rx PRO

Besides switch and mergeAll, RxJS also provides concatAll as a flattening operator. In this lesson we will see how concatAll handles concurrent inner Observables and how it is just mergeAll(1).

rx tutorial about Use RxJS switchMap to map and flatten higher order observables

Use RxJS switchMap to map and flatten higher order observables

6:04 rx PRO

In this lesson, we will learn about switchMap, a shortcut for mapping to a higher order RxJS Observable, then flattening with switch. We will also see a practical example with network requests that would be used in the real world.

rx tutorial about Use RxJS mergeMap to map and merge high order observables

Use RxJS mergeMap to map and merge high order observables

4:00 rx PRO

Like RxJS switchMap() is a shortcut for map() and switch(), we will see in this lesson how mergeMap() is a shortcut for map() and mergeAll(), and learn its arguments for customised behavior.

rx tutorial about Use RxJS concatMap to map and concat high order observables

Use RxJS concatMap to map and concat high order observables

2:11 rx PRO

Like switchMap and mergeMap, concatMap is a shortcut for map() followed by a concatAll(). In this lesson we will explore this RxJS operator and its properties.

rx tutorial about Use RxJS mergeMap for fine-grain custom behavior

Use RxJS mergeMap for fine-grain custom behavior

5:39 rx PRO

RxJS operators mergeMap and switchMap are useful for handling asynchronous responses from the server, but they can do much more. In this lesson, we will see how to use mergeMap to achieve the same functionality as map() or filter() or other custom behaviors.

rx tutorial about Split an RxJS observable with window

Split an RxJS observable with window

6:58 rx PRO

Mapping the values of an observable to many inner observables is not the only way to create a higher order observable. RxJS also has operators that take a first order observable and return a higher order Observable. In this lesson we will learn about window, an operator to split an observable.

rx tutorial about Split an RxJS observable conditionally with windowToggle

Split an RxJS observable conditionally with windowToggle

4:32 rx PRO

There are variants of the window operator that allow you to split RxJS observables in different ways. In this lesson we will explore the windowToggle variant and see one of its use cases in user interfaces.

rx tutorial about Split an RxJS Observable into groups with groupBy

Split an RxJS Observable into groups with groupBy

4:02 rx PRO

groupBy() is another RxJS operator to create higher order observables. In this lesson we will learn how groupBy works for routing source values into different groups according to a calculated key.

rx tutorial about Use groupBy in real RxJS applications

Use groupBy in real RxJS applications

5:21 rx PRO

This lesson will show when to apply groupBy in the real world. This RxJS operator is best suited when a source observable represents many data sources, e.g. an observable for multitouch events.

rx tutorial about Use switchMap as a safe default to flatten observables in RxJS

Use switchMap as a safe default to flatten observables in RxJS

3:39 rx PRO

In this lesson we look at the common strategies for creating and flattening higher order observables in RxJS. In particular, we give switchMap a careful review. It is an operator that works as an "asyncMap" and is capable of solving many of our asynchronous problems in JavaScript.

Presented by:

André Staltz

Andre is a user interface engineer at Futurice, with extensive knowledge
in reactive programming. He is a contributor to RxJS, has built
RxMarbles, written an introduction to reactive programming which went
viral, and collaborated to design ReactiveX.io. His current mission is
to redefine how we understand and structure user interfaces with the
reactive web framework Cycle.js.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?