Omid Sayfun
Omid SayfunComputer Geek
Home
Notebook
Journey

Online

Github
Linkedin
Hevy
Plyatomic
Notebook
The trap of making everything dynamic
March 01, 2024
A try at type-safe groupBy function in TypeScript
April 10, 2025
Email special headers
November 20, 2024
Adding prettier to eslint
April 10, 2025
Storing Vector in Postgres with Drizzle ORM
March 21, 2024
Upgrading my blog to Next 15
April 05, 2025
Canvas macOS issue
February 20, 2024
tsx doesn’t support decorators
March 26, 2025
Validating NestJS env vars with zod
February 06, 2025
Extending Window: types vs interfaces
March 21, 2025
Loading env file into Node process
February 06, 2025
Add update date field to Postgres
February 27, 2024
Using node API for delay
February 06, 2025
React Component Lifecycle
November 28, 2024
How CQRS is different than Event Sourcing
August 18, 2024
RabbitMQ exchange vs queue
August 14, 2024
PgVector similarity search distance functions
August 13, 2024
PgVector indexing options for vector similarity search
July 31, 2024
Using puppeteer executable for GSTS
June 08, 2024
Why EQ is Your Next Career Upgrade
May 13, 2024
Counting GPT tokens
June 30, 2024
Logging route handler responses in Next.js 14
June 19, 2024
Redirect www subdomain with Cloudflare
June 17, 2024
Logging requests in Express app
June 16, 2024
Move Docker volume to bind mount
June 12, 2024
Next.js Hydration Window Issue
May 29, 2024
Using Git rebase without creating chaos in your repo
May 16, 2024
Implementing RPC Calls with RabbitMQ in TypeScript
March 16, 2024
Optimize webpage load with special tags
March 15, 2024
What the hell is Open Graph?
March 13, 2024
My go-to Next.js ESlint config
March 10, 2024
List of useful Chrome args
March 10, 2024
Combining RxJS observables - Part 1
February 20, 2024

Combining RxJS observables - Part 1

February 20, 2024 · Updated on March 09, 2024

In my latest project, which leaned heavily on RxJS, I encountered a particularly tricky scenario that involved merging observables. Picture this: two observables are at play, but one is emitting values at a much higher frequency than the other. Faced with this challenge, I had two options I could think of: combineLatest and withLatestFrom.

The choice between them significantly impacted the behavior of the combined observables. For those who want to dive deeper, I highly recommend exploring the links and diagrams provided by the RxJS team. But to give you a clearer picture, let me walk you through the contexts I was dealing with:

Rx.combineLatest

Scenario: Imagine a live dashboard that constantly updates with the latest stock price alongside the user's current account balance, aiming to calculate and display potential investment returns. Here, the stock price is refreshed every second, while the account balance changes sporadically with user transactions.

  • Stock Price Observable (**stockPriceObservable**): Emits the latest stock price.
  • Account Balance Observable (**accountBalanceObservable**): Emits the latest account balance.

For this setup, the following snippet works wonders:

Rx.combineLatest([stockPriceObservable, accountBalanceObservable]).subscribe(
	([latestStockPrice, currentAccountBalance]) => {
		const potentialReturn = calculatePotentialReturn(
			latestStockPrice,
			currentAccountBalance,

Continue Reading

);
updateDashboard(potentialReturn);
},
);

Our goal was to ensure the dashboard reflected the most up-to-date information, whether the stock price or account balance changed. combineLatest was perfect for this, guaranteeing that the dashboard always displayed the latest figures from both observables.

Rx.withLatestFrom

Scenario: Consider an application designed for placing orders on items. This app checks for the latest promo code discount when the "Place Order" button is clicked, but it's crucial that it only fetches the most recent discount code at the moment of order placement.

  • Place Order Button Click Observable (**placeOrderClickObservable**): Fires off an event whenever the "Place Order" button is clicked.
  • Promo Code Discount Observable (**promoCodeDiscountObservable**): Emits the most current discount percentage when a new promo code is activated.

Here's how you can implement it:

placeOrderClickObservable.pipe(
  Rx.withLatestFrom(promoCodeDiscountObservable),
  .subscribe(([clickEvent, latestPromoDiscount]) => {
    applyDiscount(latestPromoDiscount);
    placeOrder();
  });

In this scenario, the main focus is on the user's action of clicking the "Place Order" button. At that precise moment, we need the latest promo code discount to apply to the order. It's crucial that the order placement logic is triggered by the button click, not by the discount observable, which only provides the necessary discount information when needed.

  • 02-20-2026

    The trap of making everything dynamic

  • 04-11-2025

    A try at type-safe groupBy function in TypeScript

  • 04-10-2025

    Email special headers

  • 04-10-2025

    Adding prettier to eslint

  • 04-09-2025

    Storing Vector in Postgres with Drizzle ORM