Could anybody provide an explanation on how my RXJS code functions?

Question

Could anybody provide an explanation on how my RXJS code functions?

 this.httpService.get('/user/appUser').pipe(
  concatMap(users => users),
  concatMap(user =>
    forkJoin({
      billingAddr: this.httpService
        .get('/user/appUserAddr', new HttpParams()
          .set('where', JSON.stringify([{ pk_addr_name: user['fk_billing_addr_name'] }]))
        ),
      shippingAddr: this.httpService
        .get('/user/appUserAddr', new HttpParams()
          .set('where', JSON.stringify([{ pk_addr_name: user['fk_shipping_addr_name'] }]))
        )
    }).pipe(map(addr => {
      user['billingAddr'] = addr.billingAddr;
      user['shippingAddr'] = addr.shippingAddr;
      return user;
    }))
  ),
  tap(res => console.log(res)),
  toArray()
);

The initial HTTP Request to get '/user/appUser' will retrieve an array similar to the following:

[  
{user_name:'test1',fk_billing_addr_name:'addr1-1',fk_shipping_addr_name:'addr1-2'},  
{user_name:'test2',fk_billing_addr_name:'addr2-1',fk_shipping_addr_name:'addr2-2'}
]

Next, I will fetch the separate billingAddr and shippingAddr values and append them back to the corresponding user object. This is handled in the second part of the code within the concatMap function.

After processing, the final output will appear as shown below:

[  
{user_name:'test1',fk_billing_addr_name:'addr1-1',fk_shipping_addr_name:'addr1-2',billingAddr:[...],shippingAddr:[...]},  
{user_name:'test2',fk_billing_addr_name:'addr2-1',fk_shipping_addr_name:'addr2-2',billingAddr:[...],shippingAddr:[...]}
]

Although the current implementation works effectively, there seems to be redundancy in the first concatMap(users=>users) operation. Is it possible to simplify the code by utilizing just one concatMap? Are there any other areas that can be optimized?

angular typescript rxjs

Answer 1

Answer №1

This question sparks curiosity. Let's dive into what's unfolding.

Start with the initial array.
The first concatMap sequentially emits each element of the array, similar to from(array).
Map to observable from forkJoin using the second concatMap.
Modify each element by fetching and assigning two new properties to it using forkJoin.
Merge all elements/emissions back together at the end as an array using the toArray() operator and emit.

Overall, everything seems fine, except for the dependency on the current user to fetch its data before moving on to the next.

If you want to fully parallelize the fetches, consider using two forkJoins. The inner forkJoin works similarly to the current setup, while the outer one replaces the need for concatMap and toArray. You can replace switchMap with any other mapping operator since Angular HTTP requests complete after the first emission, making the choice of operator impact-free.

Note: This code has not been tested. Kindly let us know if you encounter any unintended outcomes.

this.httpService.get('/user/appUser').pipe(
  switchMap(users => 
    forkJoin(users.map(user => 
      forkJoin({
        billingAddr: this.httpService
          .get('/user/appUserAddr', new HttpParams()
            .set('where', JSON.stringify([{ pk_addr_name: user['fk_billing_addr_name'] }]))
          ),
        shippingAddr: this.httpService
          .get('/user/appUserAddr', new HttpParams()
            .set('where', JSON.stringify([{ pk_addr_name: user['fk_shipping_addr_name'] }]))
          )
      }).pipe(
        map(addr => ({
          ...user,
          billingAddr: addr.billingAddr,
          shippingAddr: addr.shippingAddr
        }))
      )
    ))
  )
)

^{You could achieve a similar outcome in your code by swapping out concatMap with mergeMap}

Answer 2

This question sparks curiosity. Let's dive into what's unfolding.

Start with the initial array.
The first concatMap sequentially emits each element of the array, similar to from(array).
Map to observable from forkJoin using the second concatMap.
Modify each element by fetching and assigning two new properties to it using forkJoin.
Merge all elements/emissions back together at the end as an array using the toArray() operator and emit.

Overall, everything seems fine, except for the dependency on the current user to fetch its data before moving on to the next.

If you want to fully parallelize the fetches, consider using two forkJoins. The inner forkJoin works similarly to the current setup, while the outer one replaces the need for concatMap and toArray. You can replace switchMap with any other mapping operator since Angular HTTP requests complete after the first emission, making the choice of operator impact-free.

Note: This code has not been tested. Kindly let us know if you encounter any unintended outcomes.

this.httpService.get('/user/appUser').pipe(
  switchMap(users => 
    forkJoin(users.map(user => 
      forkJoin({
        billingAddr: this.httpService
          .get('/user/appUserAddr', new HttpParams()
            .set('where', JSON.stringify([{ pk_addr_name: user['fk_billing_addr_name'] }]))
          ),
        shippingAddr: this.httpService
          .get('/user/appUserAddr', new HttpParams()
            .set('where', JSON.stringify([{ pk_addr_name: user['fk_shipping_addr_name'] }]))
          )
      }).pipe(
        map(addr => ({
          ...user,
          billingAddr: addr.billingAddr,
          shippingAddr: addr.shippingAddr
        }))
      )
    ))
  )
)

^{You could achieve a similar outcome in your code by swapping out concatMap with mergeMap}

Could anybody provide an explanation on how my RXJS code functions?

Answer №1

Similar questions

What is the best way to utilize scope apply or run functions upon successful completion in Angular 8 jQuery ajax requests?

conducting thorough analysis for detecting modifications akin to $watchCollection in Angular2

Leverage the JSON Web Token module within a Chrome extension

Using TypeScript with React: Initializing State in the Constructor

choose a distinct value for every record in the table

What's the best way in Angular 6 to set focus on an element that's being made content editable?

Utilize Angular's ability to set values in line while clicking using an asynchronous function

Can I inform the interpreter that my function in TypeScript specifically handles undefined and null values?

Angular Form Template Unidirectional Data Binding Example

Issue with ng2-img-cropper in Angular 2: Unable to crop images from a URL

The assigned type 'string' for Apache ECharts does not match the expected type 'pictorialBar'

Storing my token in the cookie using setCookie is proving to be difficult for me

Accessing several values in Angular by clicking

Error in Angular 10/ Typescript: Cannot find property in type 'Object'.ts

Alter the class based on the incoming string from the rxjs stream

In the hook of Vue 3, the return type object within `this` is consistently evaluated as `undefined`

On a mobile device, the keyboard is hiding the PrimeNG dropdown

Angular 2 - Component's Off-click Feature Falters

Asynchronous task within an if statement

The attribute 'finally' is not found on the data type 'Promise<void>'