TIL - Use Tap in RxJS for side effects

Search for a command to run...

No comments yet. Be the first to comment.
The Problem Today, I learned that concatLatestFrom in NgRx does not wait for an observable to emit a valid value before proceeding. Instead, it simply grabs the latest available value at the time an action is dispatched. If the observable has not emi...

Today I learned how to move a branch that was incorrectly based on another branch to a different starting point. This was useful when I wanted to merge a feature branch sooner but realized it was branched off the wrong base. The Scenario Branch A is...

As someone new to RxJS, I found the Operator Decision Tree page incredibly helpful. This page provides a visual guide that simplifies the process of choosing the right RxJS operator by presenting a series of questions that lead you to the optimal cho...

An API Client Alternative

tap operator?
I recently learned about the tap operator when trying to perform a side-effect inside of a map operator. While you could perform side-effects inside of a map operator, it's a better practice to do so in a tap operator where it allows you to separate the business logic transformation from the side effects, making your code more modular and easier to maintain.
In other words, using map for both transformations and side effects can lead to "business logic" being intertwined with "infrastructure concerns", which can make it harder to reason about and modify your code. By isolating side effects in a separate tap operator, you can keep your map operators focused on the core transformation logic, making your code more composable, scalable, and maintainable.
When using the tap operator, you can pass a function as an argument. This function will be called whenever the source observable emits a value. The returned observable from tap is identical to the original observable; only the side effect is triggered.
import { from, tap } from 'rxjs';
const numbers = from([1, 2, 3]);
numbers.pipe(tap(x => console.log('Received:', x))).subscribe();
In this example, tap logs each emitted value to the console without affecting the original observable. The subscription will still receive the values as expected.