Rewriting Nested Subscription

  angular, angular-akita, rxjs

My original code is difficult to debug and maintain, so I’m rewriting my code.

Original Code

this.userService.getLocationId(id).subscribe(
  (locationId) => {
    this.userService.getUserParams(locationId).subscribe(
       (params) => {
          // This API would store users to Akita Store
          this.userService.getUsers(params).subscribe()
          // Get data from Akita Store
          this.users$.subscribe(
             (users) => {
                this.users = [...users]
                this.userService.putSomeUserFirst().subscribe(
                  (data) => {
                    if (data === true) {
                       this.users.unshift(user)
                       this.users = [...new Map(this.users.map(agent => [user.id, user])).values()];
                    } 
                  }
                )
             }
          )
       }
    )
  }
)

So basically, I am calling several API and the parameters for the API are base on the previous API result except the last API call. The last API call is about organizing users in a certain order.

Rewrote Code

this.userService.getLocation(id).pipe(

// Don't know which RxJS operator I should be using
  flatMap((locationId) => {
    if (locationId) {
      return this.userService.getUserParams(locationId)
    }
  }),
  flatMap((params) => {
    return this.userService.getUser(params)
  }),
  flatMap(() => {
   return this.users$
  })
).subscribe(
  (users) => {
    this.users = users
  }
)

I have trouble on implementing the last bit of the original nested subscription. Is the rewrote code a right approach? How should I write the remaining part and which RxJS operator should I be using?

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.