Using RxJS in your Spartacus application

Before diving into the applications of RxJS, let’s first have a look at what RxJS is and why we want to use it in our Frontend application. RxJS stands for Reactive Extensions for JavaScript and can be used in frameworks like Angular, React, Vue etc. According to the documentation, ‘RxJS is a library for composing asynchronous and event-based programs by using observable sequences’.

This means that RxJS helps us observe and react to data that flows to our application. Think of asynchronous (referred to as async from now) data coming from the Backend to which we want to respond ONCE it has arrived.

So why would we want to use/learn RxJS when JavaScript already offers solutions for handling async data? First, RxJS provides one solution to different types of data/events used in the application. Secondly, we can easily compose data from different sources we need within our components. Also, considering the focus on the SAP Spartacus storefront, Angular uses RxJS in its features like routing, reactive forms and the HttpClient and therefore automatically installs it as core set of its libraries.

With RxJS we can easily react to users’ actions, and to state changes, combine data streams, communicate between components, and manage state.

Using observable data within component template

Angular offers the ‘async’ pipe, which can be used within your components template to use asynchronous data. The advantage of this async pipe is that subscribing and unsubscribing is automatically done with initialization and destruction of the component. This avoids any potential memory leaks.

Using and changing Observable data

When you retrieve data which still needs to change or interaction within your typescript file, you can use the RxJS operator takeUntil together with a Subject, which I name ‘destroy$’, to handle the unsubscribing. (see screenshot below)

Using the takeUntil operator ensures that when ngOnDestory lifecycle hook is destroyed, the observable using the takeUntil operator with the destroy$ Subject will automatically unsubscribe.

Combining data from multiple observables with combineLatest

This operator is best used when you have multiple, long-lived observables that rely on each other for some determination or calculation. In the example below a translation and the name of the current recipe are retrieved. These two Observable values are then combined to provide the page title. Without combineLatest you would either create a subscription within another subscription or create two separate subscriptions. Do keep in mind that combineLatest won’t emit any value until both Observables have emitted at least once.

Handling events with fromEvent

The fromEvent operator accepts two arguments, element and type of event.  As can be seen in the example below, the fromEvent operator is used to listen to a click event to the provided element only when on mobile. When this is the case logic can be added after the subscribe section.

These are some applications of RxJS I find myself using often within our Frontend Spartacus application. Let me know your thoughts and please also leave any applications you would recommend me to start using.