Página de producto en Redux

En esta lección crearemos una página separada para mostrar información sobre un producto específico.

Abramos nuestra aplicación de productos y en la carpeta products creemos el archivo ProductPage.jsx. Como recordarás, cada uno de nuestros productos tiene un id único. Gracias a este id podremos generar una URL única para la página de cada producto. Tradicionalmente se verá como: /products/id123. Y el id estará contenido en su parte dinámica (nos ocuparemos de la ruta en sí un poco más adelante).

Entonces, en ProductPage.jsx creemos un componente vacío ProductPage:

export const ProductPage = () => {}

Lo primero que haremos aquí es usar el hook useParams, para extraer la parte dinámica de la URL de la página del producto en la que nos encontramos:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params
}

Luego, por el id obtenido buscaremos el producto necesario en el slice products en el store, usando el hook useSelector que ya conocemos:

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

No olvidemos importar ambos hooks en el archivo:

import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

Si el producto que necesitamos no se encuentra (por ejemplo, el usuario ingresó una dirección incorrecta), entonces mostraremos información sobre esto en pantalla. En este paso, el código para el componente ProductPage debería verse así:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params

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

	if (!product) {
		return <p>No existe tal producto</p>
	}
}

Y solo nos queda mostrar los datos obtenidos del producto en el maquetado:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Descripción: {product.desc}</p>
		<p>Precio: {product.price}</p>
		<p>Cantidad: {product.amount}</p>
	</div>
)

Abra su aplicación de estudiantes. En la carpeta students cree el archivo StudentPage.jsx, en el cual obtendrá y mostrará información sobre el estudiante seleccionado.

Con el hook de react-redux useSelector obtenga la información necesaria sobre el estudiante, como se muestra en la lección.

Muestre en el componente la información obtenida sobre el estudiante en pantalla.