Avoiding nested subcribe() calls in RxJs 6

Question

Sometimes I need a value from previous observable and run another function that depend on that value and so on. It make nested subcribe() calls and then code is very ugly and unmanageable. I have an example here:

getObservableData().subcribe(next=>
    let dialogRef=this.dialog.open(EvalListComponent, {data: next})
    dialogRef.afterClosed().subscribe(next=>{
        let k=dialogRef.componentInstance.getAnotherObservableData()
            .subcribe( next=> doSomthing(next))
}))

What kind of solution can have situation like that. I need some flatten structure. I know there is a pipe function and can be use it with rxjs operators. But how can be it accomplished?

Answer 1

I recommend this article: learn flattening strategies.

TLDR: use map operators like: mergeMap, switchMap, concatMap, exhaustMap.

All of them mostly work in the same manner —

1. They map some value to an observable (you are the one in charge of returning an observable value from them, they just map it)

2. They flatten the observable you return ( they just subscribe to it)

3. They decide about what to do before / after they flatten (“Flattening Strategy”)

Only thing you have to decide about is which strategy is useful for your example. By reading the article you can figure it out easily.