I am working on an Angular application. It fetches data from ASP.NET Core API, where server side pagination is implemented. In Angular application I have implemented state manager - NGXS.

I need to fetch the API data and display it inside dropdown and table. I have some ideas on doing that and I would like to receive some feedback.

This is what a minified version of my project looks like:

That is one of my StateModels, it stores a list of fetched services (entity) inside a wrapper

export class ServicesStateModel {
    services: PaginatedList<Service[]>; 
}

And this is the Action for fetching the services.

 @Action(FetchServices, { cancelUncompleted: true })
  fetchServices({ getState, setState }: StateContext<ServicesStateModel>, { pageNumber, pageSize }: FetchServices): Observable<ApiResponsePaginated<Service[]>> {
    return this.servicesApiService.getServices(pageNumber, pageSize).pipe(
      tap((result: ApiResponsePaginated<Service[]>) => {
        const { data } = result;
        if (data) {
          const state = getState();
          setState({ ...state, services: new PaginatedList<Service[]>(data.items,data.pageIndex, data.totalPages, data.totalCount), });
        }
      })
    )
  }

1. Every time I change the page inside the table, FetchServices action is dispatched, resulting in a new API call, and its result being saved to the state model and displayed. Is that correct or should I perhaps fetch more than one page at once? Should I save already displayed pages inside a state, so when I switch back to the previous page I avoid another API call, and get it directly from state or is that an overkill?

2. Every time I open a component where the table is displayed with no pagination implemented, I dispatch some Fetch action. It results in API call on every component enter. Should I avoid that and store the data in state and call API only on page refresh ?

Thank you for your time.