TIL: concatLatestFrom does not wait

PublishedFebruary 3, 2025

•2 min read•View as Markdown

Rohit Rajendran

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

TIL - Rebasing a branch onto a different base

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...

Jan 31, 20252 min read

TIL - Rebasing a branch onto a different base

TIL - Use Tap in RxJS for side effects

What is the 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...

Jul 26, 20242 min read

TIL - RxJS has an operator decision tree to make it easier to find the right operator

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...

May 19, 20241 min read

TIL - RxJS has an operator decision tree to make it easier to find the right operator

We do talk about Bruno: The API Client

An API Client Alternative

Mar 11, 20244 min read

Rohit Rajendran's blog

6 posts

Example of Unexpected Behavior

Consider this effect where we try to retrieve a value from the store when actionA is dispatched:

myEffect$ = createEffect(() => this.actions$.pipe( ofType(MyActions.actionA), concatLatestFrom(() => this.store.select(selectCondition).pipe( filter(value => value === true) // Only emits when true ) ), map(([action, condition]) => MyActions.nextAction({ condition })) ) );

What happens here?

If actionA is dispatched before selectCondition emits true, the effect does not wait—it just won’t run or may break.

concatLatestFrom doesn’t re-trigger when selectCondition eventually becomes true.

The Fix: Use switchMap + combineLatest

If you need to wait until a condition is met, use switchMap and combineLatest instead:

myEffect$ = createEffect(() => this.actions$.pipe( ofType(MyActions.actionA), switchMap(() => this.store.select(selectCondition).pipe( filter(value => value === true), // Waits until true map(value => MyActions.nextAction({ condition: value })) ) ) ) );

Why This Works:

switchMap starts a new observable each time actionA is dispatched.

filter(value => value === true) ensures we wait until the condition is met before proceeding.

Once selectCondition emits true, nextAction is dispatched.

What If You Need to Wait for Multiple Conditions?

If you need to wait for two conditions to become true, use combineLatest with filter:

myEffect$ = createEffect(() => this.actions$.pipe( ofType(MyActions.actionA), switchMap(() => combineLatest([ this.store.select(selectConditionOne), this.store.select(selectConditionTwo) ]).pipe( filter(([cond1, cond2]) => cond1 === true && cond2 === true), map(([cond1, cond2]) => MyActions.nextAction({ cond1, cond2 })) ) ) ) );

This ensures that the effect only runs when both conditions are true.

TIL: concatLatestFrom does not wait

Comments

More from this blog

TIL - Rebasing a branch onto a different base

TIL - Use Tap in RxJS for side effects

TIL - RxJS has an operator decision tree to make it easier to find the right operator

We do talk about Bruno: The API Client

The Problem

Example of Unexpected Behavior

The Fix: Use `switchMap` + `combineLatest`

Why This Works:

What If You Need to Wait for Multiple Conditions?

Takeaway

Command Palette

Comments

More from this blog

The Problem

Example of Unexpected Behavior

The Fix: Use switchMap + combineLatest

Why This Works:

What If You Need to Wait for Multiple Conditions?

Takeaway

The Fix: Use `switchMap` + `combineLatest`