Obtención de selectores en Redux

A veces es muy útil deshacerse del código innecesario en una aplicación, así como encapsular datos.

Abramos nuestra aplicación de productos. Fíjate que en varios lugares de la aplicación, utilizando selectores, extraemos el slice de productos para realizar algunas acciones con él.

Y ahora abriremos nuestro productsSlice.js, bajaremos al final del archivo y agregaremos un par de líneas de código, en las que escribiremos dos selectores y los exportaremos. Una función será para obtener todos los productos:

export const selectAllProducts = (state) => state.products.products

Y después de ella, la segunda - para obtener un producto por id:

export const selectProductById = (state, productId) =>
	state.products.products.find((product) => product.id === productId)

Por supuesto, puede surgirte una pregunta justa: ¿por qué tenemos este enredo: state.products.products? La respuesta es simple, en la lección anterior cambiamos la estructura del slice y ahora nuestros productos estarán ubicados como un array en una propiedad separada products del slice de productos state.products (recuerda que aquí state es el objeto raíz del estado de Redux, que contiene todos los slices).

Así, simplemente trasladamos el código para las funciones selectoras a un lugar único en la aplicación y ahora necesitamos hacer los cambios correspondientes donde las usamos. Comencemos con el archivo ProductsList.jsx. Importemos en él selectAllProducts, ya que aquí necesitaremos obtener todos los productos:

import { selectAllProducts } from './productsSlice'

Y al inicio del código de la función ProductsList, reemplacemos:

const products = useSelector((state) => state.products)

Por la línea:

const products = useSelector(selectAllProducts)

Y ahora vayamos al archivo ProductPage.jsx. Aquí necesitábamos un producto por id. Hagamos el reemplazo de la línea (no olvides la importación):

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Por:

const product = useSelector((state) => selectProductById(state, productId))

Haz un reemplazo similar tú mismo en el archivo EditProductForm.jsx. Aquí también necesitamos un producto por id.

Recuerda que esta optimización es solo para tu conveniencia y puedes hacerla cuando la consideres necesaria y conveniente. En nuestro ejemplo, imagina que hubiéramos escrito el código de la función selectora cada vez en diferentes lugares, y luego cambiáramos la estructura del estado, y entonces tendríamos que corregirlo en todos los componentes.

Abre tu aplicación de estudiantes. Abre en ella el archivo studentsSlice.js. Al final del archivo, escribe y exporta, como se muestra en la lección, dos selectores para obtener todos los estudiantes selectAllStudents y para obtener un estudiante por id selectStudentById.

Ahora importa selectAllStudents y selectStudentById en los archivos StudentsList.jsx, StudentPage.jsx y EditStudentForm.jsx, introduce en estos archivos los cambios correspondientes, como se muestra en la lección.