rxjs - 基于具有初始值的 Observable 的 startWith

Question

I have a data source with query, sort and pagination features. All of these are defined as BehaviourSubjects. I am trying to implement state saving the of the table, restoring the query, sort and pagination values.

Currently I have the code below that is responsible for it:

// params restored from storage
const pageSize = this.params.page?.pageSize ?? 20;
this.pageIndex = this.params.page?.pageIndex ?? 0;

query = new BehaviorSubject<Q | undefined>(params.query);
sort = new BehaviorSubject<Sort<T> | undefined>(params.sort);
page = new Subject<PageEvent>();

Code that manages data query:

combineLatest([this.query, this.sort])
.pipe(
  switchMap(([query, sort]) => this.page.pipe(
    // combine pageIndex: 0 for query, sort change
    startWith({ pageIndex: this.pageIndex, pageSize } as PageEvent), 
    map(page => [
      this.storeParams({ query, sort, page }),
      this.store.dispatch(
        this.selectAction({ query, page: page.pageIndex, sort, size: page.pageSize })
      )
    ]),
    catchError(error => of()),
  ))
);

It works properly but when sort or query values change, I need to reset pageIndex to 0. If I use startWith with pageIndex equal to 0, then I loose the ability to restore page values from storage.

To achieve it I reset the pageIndex on sort and query functions:

sortBy(sort: Sort<T>): void {
  this.pageIndex = 0; // need to remove
  this.sort.next(sort);
}

queryBy(query: Partial<Q>): void {
  this.pageIndex = 0; // need to remove
  this.query.next(query as Q);
}

How is it possible to achive this using a single operator, ie the combineLatest above?

Answer 1

Does something like this work? Just reset pageIndex every time combineLatest([this.query, this.sort]) has a new value.

combineLatest([this.query, this.sort]).pipe(
  tap(_ => this.pageIndex = 0),
  switchMap(([query, sort]) => this.page.pipe(
    // combine pageIndex: 0 for query, sort change
    startWith({ pageIndex: this.pageIndex, pageSize } as PageEvent), 
    map(page => [
      this.storeParams({ query, sort, page }),
      this.store.dispatch(
        this.selectAction({ 
          query, 
          page: page.pageIndex, 
          sort, 
          size: page.pageSize 
        })
      )
    ]),
    catchError(error => of()),
  ))
);