RxJS — Combining Data Streams

Photo by Martin Martz on Unsplash

Introduction

In previous few posts, we’ve covered some theory and few demos example of RxJS in Angular.

The previous post was focused about RxJs Subjects and we saw few examples of its usage such as we built an eventBus to broadcast notifications and the likes.

Today, we’ll learn about the various needs and patterns of combining data and action streams to make our angular application more reactive.

Using subject to create ActionStream

Subjects are frequently used to create action-streams in angular applications. Using subjects, we can call next() method to emit items and other code can subscribe() for notifications.

An action is simply about informing when something happened. When we define an observable for an action, the observable emits an item any time the action occurs. e.g., FilterBy dropdown with different selections or user types into a search-box to search for products etc.

Following are basic steps to setup an action-stream.

We can use subject to create action stream :

actionSubject = new Subject<string>();

call next() method to emit items:

this.actionSubject.next('tools');