Page pour un produit dans Redux

Dans cette leçon, nous allons créer une page distincte pour afficher les informations d'un produit spécifique.

Ouvrons notre application de produits et dans le dossier products créons le fichier ProductPage.jsx. Comme vous vous en souvenez, chacun de nos produits a un identifiant unique. Grâce à cet id, nous pourrons générer une URL unique pour la page de chaque produit. Traditionnellement, elle ressemblera à : /products/id123. Et l'id sera contenu dans sa partie dynamique (nous nous occuperons de la route elle-même un peu plus tard).

Alors, créons un composant vide ProductPage dans ProductPage.jsx :

export const ProductPage = () => {}

La première chose que nous ferons ici est d'utiliser le hook useParams pour extraire la partie dynamique de l'URL de la page produit sur laquelle nous nous trouvons :

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

Ensuite, à partir de l'id obtenu, nous chercherons le produit correspondant dans le slice products du store, en utilisant le hook useSelector que nous connaissons déjà :

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

N'oublions pas d'importer les deux hooks dans le fichier :

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

Si le produit dont nous avons besoin n'est pas trouvé (par exemple, si l'utilisateur a saisi une adresse incorrecte), nous afficherons une information à ce sujet sur l'écran. À cette étape, le code pour le composant ProductPage devrait ressembler à ceci :

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

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

	if (!product) {
		return <p>Aucun produit trouvé</p>
	}
}

Et il ne nous reste plus qu'à afficher les données obtenues du produit dans le rendu :

return (
	<div>
		<h2>{product.name}</h2>
		<p>Description : {product.desc}</p>
		<p>Prix : {product.price}</p>
		<p>Quantité : {product.amount}</p>
	</div>
)

Ouvrez votre application d'étudiants. Dans le dossier students, créez le fichier StudentPage.jsx, dans lequel vous récupérerez et afficherez les informations de l'étudiant sélectionné.

À l'aide du hook react-redux useSelector, récupérez les informations nécessaires sur l'étudiant, comme montré dans la leçon.

Affichez à l'écran dans le composant les informations obtenues sur l'étudiant.