Estoy trabajando en una aplicación Angular. Obtiene datos de ASP.NET Core API, donde se implementa la paginación del lado del servidor. En la aplicación Angular he implementado el administrador de estado - NGXS.

Necesito obtener los datos de la API y mostrarlos dentro del menú desplegable y la tabla. Tengo algunas ideas sobre cómo hacerlo y me gustaría recibir algunos comentarios.

Así es como se ve una versión minificada de mi proyecto:

Ese es uno de mis StateModels, almacena una lista de servicios obtenidos (entidad) dentro de un contenedor

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

Y esta es la Acción para obtener los servicios.

 @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. Cada vez que cambio la página dentro de la tabla, se envía la acción FetchServices, lo que da como resultado una nueva llamada API y su resultado se guarda en el modelo de estado y se muestra. ¿Es correcto o tal vez debería buscar más de una página a la vez? ¿Debo guardar las páginas ya mostradas dentro de un estado, de modo que cuando vuelva a la página anterior evite otra llamada API y la obtenga directamente del estado o es una exageración?

2. Cada vez que abro un componente en el que se muestra la tabla sin paginación implementada, envío alguna acción Fetch. Da como resultado una llamada a la API en cada entrada de componente. ¿Debo evitar eso y almacenar los datos en el estado y llamar a la API solo en la actualización de la página?

Gracias por tu tiempo.