Angular RxJS Streams HTTP Request - Show more items

Regarding my request about how to implement the show more functionality with SCAN (Angular RxJS Streams HTTP Request - Show more items), now I'm facing another challenge. How can I trigger the scan only when the offset changes and not when search param is updated ?

I have updated the function to add params update but now if I look for a product the new product is merged with the current. Expected behaviour : When a new params is emmited the scan shouldn't be triggered

public getProductsV3(paramMap: Observable<ParamMap>):Observable<ProductResponseApi>{


const combineLatest$ = combineLatest([this.offset$,this.limit$,paramMap]).pipe(
  switchMap(([offset,limit,paramMap])=>this.fetchProductsFromApiV2(offset,limit,paramMap.get('q') as string))
)

return combineLatest$.pipe(
  scan((prev, current) => {
    return {
      infos: current.infos,
      products: [...prev.products, ...current.products]
    };
  })
);
}

CodePudding user response：

Try withLatestFrom

const combineLatest$ = combineLatest([this.offset$,this.limit$]).pipe(
  withLatestFrom(paramMap), 
  switchMap(([[offset,limit],paramMap])=>this.fetchProductsFromApiV2(offset,limit,paramMap.get('q') as string))
)

or take

const combineLatest$ = combineLatest([this.offset$,this.limit$,paramMap.pipe(take(1))]).pipe(
  switchMap(([offset,limit,paramMap])=>this.fetchProductsFromApiV2(offset,limit,paramMap.get('q') as string))
)

CodePudding user response：

Add distinctUntilChanged to the pipe, I think here:

const combineLatest$ = combineLatest([this.offset$,this.limit$,paramMap])
    .pipe(
        distinctUntilChanged(([oldOffset], [newOffset]) => oldOffset === newOffset),
        // rest of the pipe here