RxJS：解开嵌套的可观察对象

Question

I'm looking for a more readable solution than the one I have.

I need: 1) Retrieve products from an API. They are an array of objs. 2) Filter those products based on category etc... 3) Paginate the products and return a paginated version of those products.

ngOnInit() {

//This gets the products from the API 
    this.drinkSubscription = this.drinkService.getAllDrinks().subscribe(drinks => {

//Save products without pagination for other purposes
      this.allDrinks = drinks;

//Get the parameter to filter products
      this.paramSubscription =  this.route.params.subscribe((params: Params) => {

//Filter the products and return a filtered array
        const filteredDrinks = this.filterService.filter(drinks, params['filter'], params['name']);

//Sort products based on the selection
        this.sorterSubscription = this.sorter.initialize(filteredDrinks).subscribe(sortedDrinks => {

//Create a pager that holds the paginated drinks in a property
          this.pagerSubscription = this.pagerService.initializePaginatedItems(sortedDrinks, 10, 5)
                                  .subscribe(pager => {
                                    this.pager = pager;
                                    this.paginatedDrinks = pager.paginatedItems;
                                  });
        });
      });
    });
  }

The sorter and the pagination are BehaviorSubjects so that I can inject next() but I'm not positive about them... You can see the level of indentation is quite high, and I was wondering if there's a way with RxJS to obtain the same results in a more readable way.

Answer 1

You should be able to combine these using operators. I believe the following should work.

combineLatest is roughly analogous to Promise.all([p1,p2]) - only it will emit when any of the observables emits, using the previous value for the others.

switchMap allows you to take a value emitted from an observable, and map it to another observable.

https://www.learnrxjs.io/operators/combination/combinelatest.html https://www.learnrxjs.io/operators/transformation/switchmap.html

Eg:

let drinkObservable = this.drinkService.getAllDrinks()
let paramsObervable = this.route.params

let sub = combineLatest(drinkObservable, paramsObervable)
  .pipe(switchMap(([drinks, params]) => {
    this.allDrinks = drinks
    let filteredDrinks = this.filterService.filter(drinks, params['filter'], params['name']);
    return this.sorter.initialize(filteredDrinks)
  }))
  .pipe(switchMap(sortedDrinks => {
    return this.pagerService.initializePaginatedItems(sortedDrinks, 10, 5)
  }))
  .subscribe(pager => {
    this.pager = pager;
    this.paginatedDrinks = pager.paginatedItems;
  })

Answer 2

Usually subscribe within subscribe is a "code smell" which hides the need for a "flattening" strategy to be implemented with one of the flattening operators such as mergeMap (aka flatMap ), switchMap , exaustMap , concatMap (which is mergeMap with concurrency set to 1).

In you specific case then, the code could become something like

ngOnInit() {

//This gets the products from the API 
    this.drinkSubscription = this.drinkService.getAllDrinks().switchMap(drinks => {
      this.allDrinks = drinks;
      return this.route.params)
    })
    .switchMap((params: Params) => {
        const filteredDrinks = this.filterService.filter(drinks, params['filter'], params['name']);
        return this.sorter.initialize(filteredDrinks)
    })
    .switchMap(sortedDrinks => this.pagerService.initializePaginatedItems(sortedDrinks, 10, 5))
    .subscribe(pager => {
        this.pager = pager;
        this.paginatedDrinks = pager.paginatedItems;
     });
    });
  });
});

}