DataSource load method not working with ngrx store

Question

How to use DataSource load method with ngrx store?

I have these problems: 1. When the page loads, the load method is called 2. Infinite loading 3. 2 requests are send to server instead of 1

If I use the service directly then there will be no problems.

TypeScript:

this.ds = new CustomStore({
  load: (loadOptions: any) => {
    this.myFacade.loadAllRecords(this.filter, loadOptions);
    return this.myFacade.records$
      .toPromise()
      .then(result => {
        return result;
      });
  }
});

this.ds = new CustomStore({
  load: (loadOptions: any) => {
    this.myFacade.loadAllRecords(this.filter, loadOptions);
    return new Promise(resolve => this.myFacade.records$
      .pipe(takeUntil(this.unsubscribe$)).subscribe(resolve)).then(result => {
        return result;
      });
  }
});

export class MyFacade {
  public records$: Observable<any>;
  constructor(private store: Store<State>) {
    this.records$ =
      this.store.pipe(select(myQuery.getRecords));
  }
  loadAllRecords(model: myModel, loadOptions?: LoadOptions) {
    this.store.dispatch(new LoadRecords(model, loadOptions));
  }
}

score 2 · Answer 1 · answered Feb 08 '21 at 12:59

I think the problem is your Observable records$ is not finished. And the toPromise() is still waiting for resolving of the Observable.

I would do the following:

in the facade add take(1):

this.records$ =
  this.store.pipe(
    select(myQuery.getRecords),
    take(1)
  );

and then change the CustomStore:

this.ds = new CustomStore({
  load: (loadOptions: any) => {
    this.myFacade.loadAllRecords(this.filter, loadOptions);
    return this.myFacade.records$
      .pipe(
        takeUntil(this.unsubscribe$)
      ).toPromise();
  }
});

DataSource load method not working with ngrx store

1 Answers1