Is there a more efficient way to write the code below using MergeMap or FlatMap or other rxJs operators?

Question

Is there a more efficient way to write the code below using MergeMap or FlatMap or other rxJs operators?

I have a situation where I have two observable pipes and I need to run them one after the other in order to compare their emitted values. The code snippet I attempted is provided below. Ideally, when the first observable emits a value, it should then fetch the second observable's value and compare it with the first one. I believe there might be room for improvement in this code and would appreciate any expert help in refactoring it more efficiently.

   this.selectedUnitDetailModel$.pipe(shareReplayUntil(this.destroySub)).subscribe(
          (res: UnitDetail) =>{
              if(res.unitTwo){
                this.appStore.select(selectUnit).
                pipe(shareReplayUntil(this.destroySub)).subscribe(
                  (unitId: string) => {
                    if(unitId ===  res.unitTwo){
                      this.sameUnit = true;
                    }else{
                      this.sameUnit = false;
                    }
                  });
              }
          }
       );

angular typescript rxjs ngrx rxjs-pipeable-operators

Answer 1

Answer №1

Higher order operators are unnecessary in this scenario as the observables this.selectedUnitDetailModel$ and this.appStore.select(selectUnit) operate independently. Instead, consider using functions such as forkJoin, combineLatest, or zip to process notifications from them simultaneously.

To distinguish between these functions, refer to this comparison.

Implement the following:

forkJoin(
  this.selectedUnitDetailModel$.pipe(take(1)),      // <-- complete on first emission
  this.appStore.select(selectUnit).pipe(take(1))    // <-- complete on first emission
).subscribe(
  ([res, unitId]) => this.sameUnit = res.unitTwo === unitId,
  (error) => console.log(error)                     // <-- handle error
);

forkJoin emits when the source observables complete by including take(1) for each observable. This configuration allows forkJoin to emit upon the first event of each observable and then complete, reducing the necessity for

shareReplayUntil(this.destroySub)

.

If maintaining an open emission stream from the observables is needed, consider utilizing combineLatest or zip. In such cases, replace take(1) with

shareReplayUntil(this.destroySub)

.

Update: continuous stream of `this.selectedUnitDetailModel$` observable

To achieve a continuous data stream, opt for combineLatest over forkJoin.

Try this approach:

import { Subject, combineLatest } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

combineLatest(
  this.selectedUnitDetailModel$,
  this.appStore.select(selectUnit)
).pipe(
  takeUntil(this.destroySub)         // <-- replaced with `takeUntil` operator
).subscribe(
  ([res, unitId]) => this.sameUnit = res.unitTwo === unitId,
  (error) => console.log(error)                     // <-- handle error
);

Answer 2

Higher order operators are unnecessary in this scenario as the observables this.selectedUnitDetailModel$ and this.appStore.select(selectUnit) operate independently. Instead, consider using functions such as forkJoin, combineLatest, or zip to process notifications from them simultaneously.

To distinguish between these functions, refer to this comparison.

Implement the following:

forkJoin(
  this.selectedUnitDetailModel$.pipe(take(1)),      // <-- complete on first emission
  this.appStore.select(selectUnit).pipe(take(1))    // <-- complete on first emission
).subscribe(
  ([res, unitId]) => this.sameUnit = res.unitTwo === unitId,
  (error) => console.log(error)                     // <-- handle error
);

forkJoin emits when the source observables complete by including take(1) for each observable. This configuration allows forkJoin to emit upon the first event of each observable and then complete, reducing the necessity for

shareReplayUntil(this.destroySub)

.

If maintaining an open emission stream from the observables is needed, consider utilizing combineLatest or zip. In such cases, replace take(1) with

shareReplayUntil(this.destroySub)

.

Update: continuous stream of `this.selectedUnitDetailModel$` observable

To achieve a continuous data stream, opt for combineLatest over forkJoin.

Try this approach:

import { Subject, combineLatest } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

combineLatest(
  this.selectedUnitDetailModel$,
  this.appStore.select(selectUnit)
).pipe(
  takeUntil(this.destroySub)         // <-- replaced with `takeUntil` operator
).subscribe(
  ([res, unitId]) => this.sameUnit = res.unitTwo === unitId,
  (error) => console.log(error)                     // <-- handle error
);

Answer 3

Answer №2

this.selectedUnitDetailModel$.pipe(shareReplayUntil(this.destroySub),mergeMap(
          (response: UnitDetail) =>{
              if(response.unitTwo){
               return this.appStore.select(selectUnit).
                pipe(shareReplayUntil(this.destroySub),map(
                  (unitIdentifier: string) =>  unitIdentifier ===  response.unitTwo);
              }
          }
       ).subscribe({
        next: (matchingUnit: boolean) => {
           //perform a specific action 
        }
       });

Answer 4

this.selectedUnitDetailModel$.pipe(shareReplayUntil(this.destroySub),mergeMap(
          (response: UnitDetail) =>{
              if(response.unitTwo){
               return this.appStore.select(selectUnit).
                pipe(shareReplayUntil(this.destroySub),map(
                  (unitIdentifier: string) =>  unitIdentifier ===  response.unitTwo);
              }
          }
       ).subscribe({
        next: (matchingUnit: boolean) => {
           //perform a specific action 
        }
       });

Is there a more efficient way to write the code below using MergeMap or FlatMap or other rxJs operators?

Answer №1

Update: continuous stream of `this.selectedUnitDetailModel$` observable

Answer №2

Similar questions

I'm having trouble with one of my filter pipes not displaying any results. Can anyone help me troub

Show just a single error message if there are two validation errors present

When using @Viewchild, it can sometimes lead to encountering

I'm in the process of putting together a node.js project using typescript, but I'm a little unsure about the steps needed to

React hook triggering re-render

Steps for setting up authentication in a Hyperledger Angular applicationAre you looking to

Obtain the specific generic type that is employed to broaden the scope of a

Creating Angular components and attaching them to the body tag is a simple yet

What is the process for importing a function dynamically in a Next.js TypeScript environment?

Angular-meteor tutorials have a method known as '/parties/insert' that is already clearly defined and explained

Angular animation not firing on exit

What are some techniques to ensure null checking is enforced for objects that are nested within multiple layers

typescript component parameter function causing alert

Obtaining JSON data in React Native without prior knowledge of the key

"Error encountered while executing a code snippet using Navalia in TypeScript

What is the method for incorporating dynamic query parameters using strings in Angular 7?

Compiling TypeScript files into multiple JavaScript files using Visual Studio 2015 Update 1

Ways to fill the option selections using the service

Moving information from two modules to the service (Angular 2)

Error in VS2015 when attempting to assign a two-dimensional array in TypeScript build

Is there a more efficient way to write the code below using MergeMap or FlatMap or other rxJs operators?

Answer №1

Update: continuous stream of this.selectedUnitDetailModel$ observable

Answer №2

Similar questions

I'm having trouble with one of my filter pipes not displaying any results. Can anyone help me troub

Show just a single error message if there are two validation errors present

When using @Viewchild, it can sometimes lead to encountering

I'm in the process of putting together a node.js project using typescript, but I'm a little unsure about the steps needed to

React hook triggering re-render

Steps for setting up authentication in a Hyperledger Angular applicationAre you looking to

Obtain the specific generic type that is employed to broaden the scope of a

Creating Angular components and attaching them to the body tag is a simple yet

What is the process for importing a function dynamically in a Next.js TypeScript environment?

Angular-meteor tutorials have a method known as '/parties/insert' that is already clearly defined and explained

Angular animation not firing on exit

What are some techniques to ensure null checking is enforced for objects that are nested within multiple layers

typescript component parameter function causing alert

Obtaining JSON data in React Native without prior knowledge of the key

"Error encountered while executing a code snippet using Navalia in TypeScript

What is the method for incorporating dynamic query parameters using strings in Angular 7?

Compiling TypeScript files into multiple JavaScript files using Visual Studio 2015 Update 1

Ways to fill the option selections using the service

Moving information from two modules to the service (Angular 2)

Error in VS2015 when attempting to assign a two-dimensional array in TypeScript build

Update: continuous stream of `this.selectedUnitDetailModel$` observable