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

Tips on how to dynamically load the content of a URL into a modal and update the browser address simultaneously

"An easy way to dynamically update a select dropdown based on the data of the corresponding row in a table using jQuery

React in 2022 has encountered an unexpected expression when it was expecting either an assignment or function call

Hidden overflow and identification in URL causes content to be invisible and suddenly appear at the top of the page

Removing API request in React.js

Unable to activate the 'Click' function in Angular/Typescript after selecting element with 'document.querySelector'

How can I trigger a success event in JavaScript after ASP.NET form validation?

When the page hosted on Vercel is reloaded, `getStaticProps` does not function as expected

Choose all from the list of categories

Does modifying data from an AngularJS service update the original data within the service?

The rationale behind organizing analogous variables into groups

What is the best way to bring files into your project from a different directory?

What is the most efficient way to transfer a value from the main application file to a router file using the express framework

Ways to deselect a checkbox if the selected option is anything other than 'All'

Display the Angular Material sidebar within the parent component's closing tag

Tips for customizing the Electron title bar and enabling drag functionality

Troubleshooting Guide: Issues with Bootstrap 3 Modal Window Implementation

Utilize an image in place of text (script type="text/javascript")

Tips for retrieving arguments within a method called from a template in vue.js?

Releasing Typescript 2.3 Modules on NPM for Integration with Angular 4