Fundamentos de los Selectors en NgRx

Selectors — Crear y Utilizar Selectores

Photo by Jean-Frederic Fortier on Unsplash

¿Qué son los Selectors?

Los selectores en NgRx son funciones puras diseñadas para obtener segmentos específicos del estado almacenado. El Store de NgRx ofrece funciones auxiliares para optimizar esta selección. Los selectores aportan varias características clave:

• ✅ Portabilidad: Facilitan el uso del estado en diferentes partes de la aplicación.
• ✅ Memoización: Mejoran el rendimiento al almacenar resultados de selecciones anteriores.
• ✅ Composición: Permiten combinar varios selectores para crear uno nuevo.
• ✅ Testeabilidad: Su naturaleza pura facilita la realización de pruebas.
• ✅ Seguridad de Tipos: Aseguran que los datos manejados son del tipo esperado.

¿Cómo se crean los selectores?

Hay varias funciones proporcionadas por NgRx para crear y combinar selectores:

createSelector

Esta es la función más común para crear un selector. Permite combinar varios selectores o fragmentos del estado y puede aplicar una función de proyección para devolver un valor derivado.

Esta función puede recibir varios parámetros, al menos dos parámetros:

• ✅Los primeros argumentos (puede ser 1 o N) son funciones que extraen partes del estado. Por ejemplo, si tenemos un estado con los dominios Books, Authors y User, pero solo necesitamos los dominios Books y User necesitaríamos definir dos argumentos, uno por cada dominio extraído.
• ✅El último argumento siempre será una función que recibe los resultados de los primeros argumentos y debe devolver un valor derivado basado en estos argumentos.

Vamos a ver un ejemplo:

import { createSelector } from '@ngrx/store';

const selectBooks = (state) => state.books;
const selectSelectedAuthor = (state) => state.selectedAuthor;

const selectCurrentAuthorBooks = createSelector(
  selectBooks,
  selectSelectedAuthor,
  (books, { authorId }) => books.find(book => author.id === authorId)
);

En este ejemplo, selectCurrentAuthorBooks es un selector que combina selectBooks y selectSelectedAuthor para encontrar y devolver los libros del autor seleccionado.

createFeatureSelector

Se utiliza para seleccionar una porción de estado basada en su clave de característica (feature key). Esto es útil en aplicaciones grandes donde el estado está dividido en múltiples módulos o “features”.

import { createFeatureSelector } from '@ngrx/store';

const selectBookState = createFeatureSelector('books');

// Usándolo con createSelector para obtener datos específicos
const selectAllBooks = createSelector(
  selectBookState,
  (state) => state.allBooks
);

Alto allí

Este es artículo es parte de mi curso de Introducción a NgRx, donde abordamos temas como Store, Actions, Reducers, Selectors, y Effects. Si no te suena algún tema este artículo, ¡te recomiendo revisar mi curso!

Implementando selectors en nuestra aplicación

Vamos a recordar nuestra maravillosa aplicación 🎉Ng Party Planner🎉, en los artículos anteriores hemos implementado las acciones y los reducers, pero ¿cómo podemos ver reflejados las actualizaciones del estado en nuestra aplicación? ¡Vamos a verlo!

¡Recuerda que puedes acceder al repositorio para ver el código generado en este módulo!

Si te fijas, en el archivo guest.selectors.ts tenemos definido un selector que simplemente nos devuelve todos invitados:

guest.selectors.ts

Pero casualmente la pantalla tiene una serie de botones que deberían actuar como filtros, es decir, dependiendo de qué opción selecciones se deberían mostrar los registros que cumplan con esa condición, así que vamos a por ello.

Tenemos que generar 3 nuevos selectores, uno que nos devuelva los invitados que han confirmado su asistencia, otro para los que la han rechazado y uno para los que aún no han respondido:

guests.selectors.ts

Ahora simplemente nos quedaría implementar las invocaciones a estos selectores en el componente guests-dataview.component.ts:

guests-dataview.component.ts

Si lo probamos vemos que ya podemos filtrar según su confirmación:

Filtros en acción 😎

¡Buen trabajo!

¡Enhorabuena! Ya tenemos una aplicación completamente funcional. Nuestra aplicación es capaz de Leer, Crear, Eliminar y Modificar a los invitados que estarán en nuestra maravillosa fiesta, pero… ¿Qué pasa si queremos añadir un nuevo estado para la playlist?, ¿y si necesitamos obtener los datos de una API? ¿Features? ¿Efectos? ¡Esto solo ha sido el comienzo, amigo mío!