Uncomplicating RxJs Operators: Decoding switchMap and combineLatest

Question

Uncomplicating RxJs Operators: Decoding switchMap and combineLatest

I currently have the following RxJS subscription :

combineLatest([obs1$, obs2$])
  .pipe(
     filter(val=>!!val[0] && !!val[1]), // ensuring no null values on both observables
     switchMap(([val1, val2]) => combineLatest([of(v1), getObs3$(v2)]))
   )
   .subscribe(([val1, val3]) => { ... });

Although the code functions as intended, it seems a bit cumbersome. I am certain that the switchMap into combineLatest with an of() operator can be improved.

Note : To call getObs3$(v2), I need to ensure that there is a value in obs1$ first. Additionally, I require the val1 in the subscription as I will be using it later on.

Does anyone have any ideas on how to optimize this?

angular typescript rxjs reactive rxjs-pipeable-operators

Answer 1

Answer №1

Consider this approach:

combineLatest([source1$, source2$]).pipe(

  // ensure no null values for both
  filter(value=>!!value[0] && !!value[1]),

  switchMap(([value1, value2]) => fetchObs3$(value2).pipe(
    map(result3 => [value1,result3])
  ))

).subscribe(([result1, result3]) => { ... });

This is a common structure used frequently in these scenarios. We are adding result3 to a tuple here, similar to combine latest, but the same logic would apply if enriching an object (regardless of its depth).

Answer 2

Consider this approach:

combineLatest([source1$, source2$]).pipe(

  // ensure no null values for both
  filter(value=>!!value[0] && !!value[1]),

  switchMap(([value1, value2]) => fetchObs3$(value2).pipe(
    map(result3 => [value1,result3])
  ))

).subscribe(([result1, result3]) => { ... });

This is a common structure used frequently in these scenarios. We are adding result3 to a tuple here, similar to combine latest, but the same logic would apply if enriching an object (regardless of its depth).

Uncomplicating RxJs Operators: Decoding switchMap and combineLatest

Answer №1

Similar questions

Optimal scenarios for implementing computed/observables in mobx

Setting attributes within an object by looping through its keys

Page refreshing in Angular 5 consistently redirects to the home page instead of staying on the current page

Error: The class constructor [] must be called with the 'new' keyword when creating instances in a Vite project

JavaScript: Navigating function passing between multiple React components

Guide to Setting Up Infinite Scroll with Next JS SSG

Using injected services within static methods may seem tricky at first, but once you

Is it possible to navigate to a particular step during an Angular IntroJS event?

Exclude Cancel button solely from pFileUpload

Issue with manipulating currency conversion data

Utilizing ngModel with an uninitialized object

Transmitting information to the main Vue class component

Error TS2339 encountered in ngx-uploader: There is no property called 'lastModifiedDate' on the type 'File'

Identifying Flaws in Components during Creation with Ready-Made spec.ts Files

Transferring data from the server to the client side in Next JS with the help of getInitialProps

`Unable to update the checked prop in MUI switch component`

Checking for Object Equality in TypeScript

The parameter type ‘DocumentData’ cannot be assigned to type ‘never’ in this argument

When utilizing Monggose, Angular, and Node, a route containing the deleteOne method repeatedly reports that the object has been successfully deleted, despite the delete count remaining

"Enhance your database with Firebase's dynamic features for adding and removing