Use Higher Order Observables in RxJS Effectively

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.

Watch User Created Playlist (13)

This playlist is user created.

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
rxjs tutorial about Get Started with Higher Order Observables in RxJS

Get Started with Higher Order Observables in RxJS

4:35 rxjs

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".

rxjs tutorial about Flatten a Higher Order Observable with RxJS switch

Flatten a Higher Order Observable with RxJS switch

4:52 rxjs 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.

rxjs tutorial about Flatten a Higher Order Observable with mergeAll in RxJS

Flatten a Higher Order Observable with mergeAll in RxJS

3:19 rxjs 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.

rxjs tutorial about Flatten a Higher Order Observable with concatAll in RxJS

Flatten a Higher Order Observable with concatAll in RxJS

3:22 rxjs 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).

rxjs tutorial about Use RxJS switchMap to Map and Flatten Higher Order Observables

Use RxJS switchMap to Map and Flatten Higher Order Observables

6:04 rxjs 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.

rxjs tutorial about Use RxJS mergeMap to Map and Merge High Order Observables

Use RxJS mergeMap to Map and Merge High Order Observables

4:00 rxjs 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.

rxjs tutorial about Use RxJS concatMap to Map and Concat High Order Observables

Use RxJS concatMap to Map and Concat High Order Observables

2:11 rxjs 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.

rxjs tutorial about Use RxJS mergeMap for Fine-grain Custom Behavior

Use RxJS mergeMap for Fine-grain Custom Behavior

5:39 rxjs 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.

rxjs tutorial about Split an RxJS Observable with Window

Split an RxJS Observable with Window

6:58 rxjs 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.

rxjs tutorial about Split an RxJS Observable Conditionally with windowToggle

Split an RxJS Observable Conditionally with windowToggle

4:32 rxjs 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.

rxjs tutorial about Split an RxJS Observable into Groups with groupBy

Split an RxJS Observable into Groups with groupBy

4:02 rxjs 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.

rxjs tutorial about Use groupBy in Real RxJS Applications

Use groupBy in Real RxJS Applications

5:21 rxjs 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.

rxjs 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 rxjs 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.

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