Cache de Routes y Components con RouteReuseStrategy — Angular (Ejemplo)
En el anterior Post explicamos como se puede realizar el cacheado de Routes y de Componentes utilizando la clase abstracta RouteReuseStretagy, en este post realizaremos un pequeño ejemplo. Optimizando la carga de imágenes y servicios de un componente
En el Ejemplo realizaremos un pequeña lista de Usuarios cargados desde un servicio externo ( hosted REST-API ) llamado Reqres que nos proporciona un servicio con paginación perfecto para este ejemplo, ademas que esta lista de Usuarios contará con un buscador que solo buscara entre los elementos presentes. Al hacer click en un Usuario cualquiera nos enviara a un nuevo Route donde se hará una llamada a un servicio externo Typicode para obtener una lista con images del usuario seleccionado.
Ahora supongamos que nos fuimos a la pagina 2 y hicimos una búsqueda, seleccionamos alguno y nos envío a sus fotos, al querer volver a la lista de Usuarios nos daríamos cuenta que los estados de búsqueda y paginación nose mantuvieron, para que los estados se mantengan haremos uso de la clases abstracta RouteReuseStretagy, utilizando una lógica para el cacheado de los datos de usuario y así reducir las peticiones a los servidores.
Y lo agregamos a los Providers del app.module.ts
@NgModule({
declarations: [
AppComponent,
.....
],
imports: [
BrowserModule,
.....
],
providers: [
.....
{provide : RouteReuseStrategy, useClass: CustomReuseStrategy}
],
bootstrap: [AppComponent]
})Ahora veremos que el número de peticiones se reducirán drásticamente.
Sin la clase Abstracta RouteReuseStrategy. El resultado sera la perdida de los estados anteriores como la búsqueda y ademas se volverá a hacer solicitudes de las imágenes de la pantalla Users.
Con la clase Abstracta RouteReuseStrategy, veremos que al ir de Users a Photos realizara la petición de las imágenes pero al volver a la pantalla de Users el estado de búsqueda se mantuvo y si volvemos a ingresar a el Usuario seleccionado anteriormente veremos que no se hace ninguna petición lo que nos demuestra que el componente es cacheo con su respectiva ruta.
Como pudimos ver esta Clase nos permite proponer una Estrategia de mantener los estados de una ruta y/o componente ,pero principalmente reduce la carga de servicios, como pudimos ver reducimos la carga de imágenes.
La sobre carga de Providers me parece algo realmente poderoso ,como en este caso pudimos manipular las rutas y los lifecycle a nuestro gusto
Acá les dejo el link del Repositorio.
Anterior post Cache de Routes y Components con RouteReuseStrategy — Angular
Gracias
