Mitrovic / Mitrovic / Yadav RxJS Cookbook for Reactive Programming

Discover 40+ real-world solutions for building async, event-driven web apps
1. Auflage 2025
ISBN: 978-1-78862-531-9
Verlag: De Gruyter
Format: EPUB
Kopierschutz: 0 - No protection

E-Book, Englisch, 318 Seiten

Building modern web applications that are responsive and resilient is essential in this rapidly evolving digital world. Imagine effortlessly managing complex data streams and creating seamless user experiences-this book helps you do just that by adopting RxJS to boost your development skills and transform your approach to reactive programming.
Written by a seasoned software engineer and consultant with a decade of industry experience, this book equips you to harness the power of RxJS techniques, patterns, and operators tailored for real-world scenarios. Each chapter is filled with practical recipes designed to tackle a variety of challenges, from managing side effects and ensuring error resiliency in client applications to developing real-time chat applications and event-driven microservices. You'll learn how to integrate RxJS with popular frameworks, such as Angular and NestJS, gaining insights into modern web development practices that enhance performance and interactivity.
By the end of this book, you'll have mastered reactive programming principles, the RxJS library, and working with Observables, while crafting code that reacts to changes in data and events in a declarative and asynchronous way.

Autoren/Hrsg.

Mitrovic, Nikola

Yadav, Santosh

Fachgebiete

• Mathematik | Informatik EDV | Informatik EDV & Informatik Allgemein

Leseproben

1

Handling Errors and Side Effects in RxJS

Welcome to the !

After working with RxJS for a while, and learning all about every operator in RxJS docs, have you ever felt stuck or didn’t know how to get your RxJS game to the next level? This book is Packt(ed) with advanced recipes and practical use cases to take you to that next level and make you ready for any real-life challenge in the web development world. Buckle up, it’s going to be a fun ride!

This chapter explores techniques to manage the inevitable complexities of real-world reactive programming. We’ll learn how to gracefully handle errors and maintain stream integrity. We will delve into side effect management to perform tasks such as logging, API calls, and DOM updates without disrupting data flows. Also, we will master strategies to isolate side effects and ensure predictable, testable RxJS code. Finally, we will understand the role of WebSockets as side effects and explore heartbeat techniques to ensure connection integrity in a Reactive way.

In this chapter, we will cover the following recipes:

• Handling DOM updates
• Handling network requests
• Handling network errors
• Debugging RxJS streams
• Understanding HTTP polling
• Handling WebSocket connections

Free Benefits with Your Book Your purchase includes a free PDF copy of this book along with other exclusive benefits. Check the section in the Preface to unlock them instantly and maximize your learning experience.

Technical requirements

To follow along in this chapter, you’ll need the following:

• Angular v19+
• RxJS v7
• Node.js v22+
• npm v11+ or pnpm v10+

The code for recipes in this chapter is placed in the GitHub repository:

https://github.com/PacktPublishing/RxJS-Cookbook-for-Reactive-Programming/tree/main/Chapter01

Handling DOM updates

Due to its declarative and reactive nature, RxJS provides a way to efficiently take care of DOM updates and react to UI updates without directly manipulating DOM elements.

How to do it…

In this example, we will build a small cooking recipe app, where we will load a list of recipes from the mocked BE (using MSW) and show them in the list. After that, we will implement two search fields to find desired recipes by name and ingredient. We will do this by handling input updates from both filters in a declarative way, then combining the query results and providing filtered results in the end.

Here’s how the app would look in its initial state:

Figure 1.1: Recipe app – initial state

Step 1 – Handling one search input

Let’s start easy by implementing search by name filter first. In our Angular component, we will have a DOM element reference and a operator:

Here’s a breakdown of what we are doing:

1. With the operator, we will extract the value of the input and state that the starting value should be an empty string with the operator.
2. To prevent sending unnecessary requests and increasing load on the server, we will debounce every user keystroke up to 500 milliseconds. Also, we will check whether the search query has changed from the previous one (e.g., if we wanted to search for lasagna, we would type the query , get the result, and then delete “" and put “" back in the query within 500 milliseconds; we won’t send another request, because the query hasn’t changed).
3. In the end, once we get the search query, we will use to take the query value and send the request to the BE API.

Why switchMap?

The main reason we are using here is the cancellation effect. This is what it means. Assume that a user types a search query, and we have an ongoing request. Now, if the user changes the query to a new one, the previous request will be cancelled automatically, since we are no longer interested in the previous result.

Now, when we type a search query for recipes, we might see the results in the UI:

Figure 1.2: Search recipe by name

Step 2 – Handling two search inputs

Now let’s add a second search input for ingredients. Again, we will create a stream of search input events from the second input, but this time, we want to combine results with the first input as well. The way we can achieve that is by using the function that will create a stream of events from multiple sources.

Here the operator comes in handy as well, since won’t emit any values until both inputs emit at least once. That would mean that we would see the empty recipes list initially without using . This is what our code looks like after adding the second input:

Notice one more important change from the previous example with . One of the most common mistakes when using operator is assuming it does figure out on its own when the stream has changed, but that only works for primitive values coming out of a stream as a result. Previously, we emitted string values from the first search input, but now since we are combining the results of two search inputs, we have a stream of object values. Therefore, we must do a deep check on previous and current object properties, in our case, and . Alternatively, we could use the operator.

If we open our app in the browser, now we can search recipes not only by name but also by ingredient:

Figure 1.3: Search recipe by name and ingredient

See also

• MSW: https://mswjs.io/
• operator: https://rxjs.dev/api/index/function/fromEvent
• : https://rxjs.dev/api/operators/map
• operator: https://rxjs.dev/api/operators/startWith
...

Über Autor(innen)

Mitrovic  Nikola :

Nikola Mitrovic is a seasoned software engineer and consultant with experience that spans nearly a decade, with technical expertise in micro-frontend architecture and web performance, as well as technologies such as Angular, React, Next.js, Node.js, NestJS, NX, and AWS. He is an enthusiastic public speaker and has presented at some of the world's largest tech conferences, sharing his passion for crafting exceptional web experiences. He has business domain expertise in EdTech, HealthTech, and Digital Identity. For the last couple of years, Nikola has been in leadership roles, inspiring a culture of technical excellence, continuous learning, collaboration, and psychological safety within the organization. He strongly believes in leading with empathy, honesty, and passion, empowering teams with trust and autonomy. Prior to this, Nikola was a partner, technical architect, and development lead at Vega IT, where he was recognized as the company's MVP for three consecutive years (2022-2024).