Reutilización múltiple de datos del slice en Redux

En la lección anterior agregamos al formulario para añadir producto otro campo con una lista desplegable para seleccionar el vendedor que lo publica. Supongamos, ahora también necesitamos mostrar esta información en varios lugares más de la aplicación. Para esto no duplicaremos el código cada vez, sino que simplemente crearemos un componente separado, en el cual extraeremos los datos del slice y los mostraremos en las partes de la aplicación donde lo necesitemos.

Abramos nuestra aplicación de productos. Ahora en la carpeta products creemos otro archivo SellerOfProd.jsx. Para empezar importemos el hook useSelector, con la ayuda del cual obtendremos el slice con el producto necesario:

import { useSelector } from 'react-redux'

Luego extraigamos del store el producto necesario por id del vendedor, que le pasaremos a nuestro nuevo componente en las props:

export const SellerOfProd = ({ sellerId }) => {
	const seller = useSelector((state) =>
		state.sellers.find((seller) => seller.id === sellerId)
	)
}

Y en el caso de que exista tal vendedor, devolveremos su nombre, y si no, devolveremos 'unknown':

return <span>by {seller ? seller.name : 'unknown'}</span>

Ahora importemos nuestro nuevo componente en ProductsList.jsx e insertémoslo en la función ProductsList justo después del título con el nombre del producto. Como ven, le pasamos en las props el id:

<SellerOfProd sellerId={product.seller} />

Ahora, si ejecutamos nuestra aplicación, añadimos un nuevo producto y lo encontramos en la lista, veremos que le apareció un vendedor, y en los productos, añadidos automáticamente al iniciar la aplicación, tendrá 'unknown'.

Una pequeña digresión: si tu eslint en el editor VS Code se queja de sellerId, y la aplicación funciona, entonces puedes ignorarlo por ahora o abrir el archivo .eslintrc.cjs de tu aplicación y en rules agregar "react/prop-types": "off".

Obviamente, nos gustaría añadir información sobre el vendedor también en la página del producto. Para esto insertemos en el maquetado de ProductPage después del título con el nombre del producto nuevamente esta línea y comprobemos que todo funciona:

<SellerOfProd sellerId={product.seller} />

Abra su aplicación de estudiantes. Habiendo estudiado el material de la lección, en la carpeta students cree un archivo para el componente TeacherForStudent. Como resultado, el componente debe devolver el nombre completo del profesor, y al lado entre paréntesis la asignatura que imparte. Encuentre al profesor necesario usando el hook useSelector. Si el profesor para este estudiante falta, muestre 'anonym'.

Usando el componente obtenido en la tarea anterior, muestre los datos del profesor para cada estudiante en la página con la lista de estudiantes.

Haga lo mismo que en la tarea anterior, pero para la página individual del estudiante.