Steer clear of chaining multiple subscriptions in RXJS to improve code

Question

Steer clear of chaining multiple subscriptions in RXJS to improve code

I have some code that I am trying to optimize:

someService.subscribeToChanges().subscribe(value => {
    const newValue = someArray.find(val => val.id === value.id)
    if (newValue) {
       if (value.status === 'someStatus') { 
          someArray.findIndex((a) => a.id === value.id)
          someArray.splice(index, 1);
       } else { 
          newValue.status = value.status;
       }
    } else { 
        if (value.someProp === 'abc') {
          someService.doSomeAsyncStuff().subscribe(data => {
            someService.handleData(data);
          });
        }
    }
 });

I attempted to refactor the code in order to avoid the second subscribe:

sub$ = someService.subscribeToChanges().pipe(switchMap(value => {
  const newValue = someArray.find(val => val.id === value.id)
  if (newValue) {  
       if (value.status === 'someStatus') { 
          someArray.findIndex((a) => a.id === value.id)
          someArray.splice(index, 1);
       } else { 
          newValue.status = value.status;
       }
  } else { 
    return iif(() => value.someProp === 'ABC', someService.doSomeAsyncStuff);
  }
}));

sub$.subscribe(data => someService.handleData(data))

This approach works when the iif condition is true. However, it halts the stream completely if false, contrary to what I desire which is to keep the stream flowing.

javascript angular typescript rxjs

Answer 1

Answer №1

There are three different conditions in which you can divide them

sub$ = someService.subscribeToChanges().pipe(switchMap(value => {
 const newValue = someArray.find(val => val.id === value.id)
 if (newValue) {
   if (value.status === 'someStatus') { 
      someArray.findIndex((a) => a.id === value.id)
      someArray.splice(index, 1);
   } else { 
      newValue.status = value.status;
   }
 return of(value); 
 }

    if(value.someProp === 'ABC')
      return someService.doSomeStuff()

    return of(value)
  })
)

Answer 2

There are three different conditions in which you can divide them

sub$ = someService.subscribeToChanges().pipe(switchMap(value => {
 const newValue = someArray.find(val => val.id === value.id)
 if (newValue) {
   if (value.status === 'someStatus') { 
      someArray.findIndex((a) => a.id === value.id)
      someArray.splice(index, 1);
   } else { 
      newValue.status = value.status;
   }
 return of(value); 
 }

    if(value.someProp === 'ABC')
      return someService.doSomeStuff()

    return of(value)
  })
)

Answer 3

Answer №2

Nested subscriptions in rxjs are considered an anti-pattern, so it's best to avoid them. I suggest using two separate subscriptions instead of nesting them, especially if you have different side effects (such as someService.handleData and doSomeStuff).

To improve reusability, create a subscribeToChangesId with a comparator for the someArray id

const subscribeToChangesIdEqualsSomeArrayId$ = someService.subscribeToChanges().pipe(
  map(value => someArray.find(val => val.id === value.id))
);

Create an Observable for doSomeStuff

const doSomeStuff$ = subscribeToChangesIdEqualsSomeArrayId$.pipe(
  filter(newValue => newValue)
);

Create an Observable for handleData

const handleData$ = combineLatest([
  subscribeToChangesIdEqualsSomeArrayId$,
  someService.subscribeToChanges()
]).pipe(
  filter(([newValue, value]) => !newValue && value.someProp === 'abc'),
  switchMap(() => someService.doSomeStuff())
);

Usage Example

doSomeStuff$.subscribe(() => doSomeStuff());
handleData$.subscribe(data => someService.handleData(data));

Note: The variable names used here match those from your original question for clarity, but feel free to adjust them for better readability.

Answer 4

Nested subscriptions in rxjs are considered an anti-pattern, so it's best to avoid them. I suggest using two separate subscriptions instead of nesting them, especially if you have different side effects (such as someService.handleData and doSomeStuff).

To improve reusability, create a subscribeToChangesId with a comparator for the someArray id

const subscribeToChangesIdEqualsSomeArrayId$ = someService.subscribeToChanges().pipe(
  map(value => someArray.find(val => val.id === value.id))
);

Create an Observable for doSomeStuff

const doSomeStuff$ = subscribeToChangesIdEqualsSomeArrayId$.pipe(
  filter(newValue => newValue)
);

Create an Observable for handleData

const handleData$ = combineLatest([
  subscribeToChangesIdEqualsSomeArrayId$,
  someService.subscribeToChanges()
]).pipe(
  filter(([newValue, value]) => !newValue && value.someProp === 'abc'),
  switchMap(() => someService.doSomeStuff())
);

Usage Example

doSomeStuff$.subscribe(() => doSomeStuff());
handleData$.subscribe(data => someService.handleData(data));

Note: The variable names used here match those from your original question for clarity, but feel free to adjust them for better readability.

Answer 5

Answer №3

Keeping all logic in a single chain is always the best practice. You can achieve this by following a pattern like the one shown below. Since newValue is not required later in the chain, the process is quite straightforward:

someService.subscribeToChanges()
  .pipe(
    switchMap(value => {
      const newValue = someArray.find(val => val.id === value.id);
      if (!newValue && value.someProp === 'abc') {
        return someService.doSomeStuff();
      }
      return of(undefined);
    }),
  )
  .subscribe(data => {
    if (data === undefined) { // When data is set means we ran the second Observable
      doSomeStuff();
    } else {
      someService.handleData(data);
    }
  });

If undefined is a valid response for someService.doSomeStuff(), it’s advisable to wrap its response with an object structure such as { response: data } so you can easily trace its origin.

Avoid creating multiple subscriptions unless absolutely necessary, as it adds complexity and requires careful attention to details like subscription order and Observable sharing. Reading RxJS chains from top to bottom, similar to synchronous code, enhances readability.

Answer 6

Keeping all logic in a single chain is always the best practice. You can achieve this by following a pattern like the one shown below. Since newValue is not required later in the chain, the process is quite straightforward:

someService.subscribeToChanges()
  .pipe(
    switchMap(value => {
      const newValue = someArray.find(val => val.id === value.id);
      if (!newValue && value.someProp === 'abc') {
        return someService.doSomeStuff();
      }
      return of(undefined);
    }),
  )
  .subscribe(data => {
    if (data === undefined) { // When data is set means we ran the second Observable
      doSomeStuff();
    } else {
      someService.handleData(data);
    }
  });

If undefined is a valid response for someService.doSomeStuff(), it’s advisable to wrap its response with an object structure such as { response: data } so you can easily trace its origin.

Avoid creating multiple subscriptions unless absolutely necessary, as it adds complexity and requires careful attention to details like subscription order and Observable sharing. Reading RxJS chains from top to bottom, similar to synchronous code, enhances readability.

Steer clear of chaining multiple subscriptions in RXJS to improve code

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to create a Facebook reveal tab using either Javascript or .NET?

Retrieving information from an openDatabase using AngularJS

Angular's jQuery timepicker allows users to easily select a

Encountered a problem while attempting to create a new project using angular/cli

Is there a way to prevent users from selecting certain days in ion-datetime?

How to eliminate undefined values from a dropdown selection in AngularJS

What is the best location to initialize a fresh instance of the Firebase database?

ways to disrupt a timeout

The continuous resizing of the window is triggering a loop in flexslider when the resize function is called

How can I subtract a value from my array in Angular?

Is there a way to use ng-click to switch the ng-src of one image with that of another?

When using Angular to send a request body containing IFormFile to an ASP.NET Core Web API, the properties are unexpectedly null

Ways to customize PreBid.js ad server targeting bidder settings

One should refrain from loading the API in Angular when there is no data present, by utilizing the global.getData method

Is there a way to utilize a Javascript function to incorporate commas into a div tag?

Using JavaScript drag and drop feature to remove the dragged element after a successful drop operation

Send a JSON string directly to Google Cloud Storage without the need for a file upload

Retrieve the JSON data from an AJAX request

Steps to load dynamic configuration in AngularFire2

Change the behavior of JavaScript so that it executes when clicked, not when the