Page du vendeur dans Redux

Il ne reste plus grand-chose. Dans cette leçon, faisons la dernière chose - ajoutons à notre application une page distincte pour chaque vendeur. Il n'y aura ici que des actions déjà familières. Commençons.

Ouvrons notre application avec les produits, et dans celle-ci le dossier sellers. Créons dans ce dossier le fichier SellerPage.jsx. Maintenant, commençons à écrire le code SellerPage pour notre composant :

export const SellerPage = () => {}

Pour commencer, obtenons l'id du vendeur et avec lui trouvons l'objet du vendeur nécessaire dans le slice :

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

	const seller = useSelector((state) => selectSellerById(state, sellerId))
}

Ensuite, plus bas dans le code pour SellerPage après avoir obtenu le vendeur, nous obtiendrons tous les produits, puis nous sélectionnerons parmi eux seulement ceux qui sont mis en ligne par ce vendeur :

const productsOfSeller = useSelector((state) => {
	const allProducts = selectAllProducts(state)
	return allProducts.filter((product) => product.seller === sellerId)
})

Et ensuite, à partir des noms des produits sélectionnés, nous formerons une liste en utilisant map. De plus, chaque nom de produit dans cette liste sera un lien vers la page de ce produit :

const productNames = productsOfSeller.map((product) => (
	<li key={product.id}>
		<Link to={`/products/${product.id}`}>{product.name}</Link>
	</li>
))

Et à la fin du code pour SellerPage, retournons le rendu : un titre avec le nom du vendeur et une liste des produits que ce vendeur a mis en ligne :

return (
	<div>
	<h2>Vendeur : {seller.name}</h2>

	<ul>{productNames}</ul>
	</div>
)

Bien sûr, nous avons aussi besoin d'une route pour la page du vendeur. Ouvrons le fichier App.jsx et ajoutons-la en dernier parmi les routes enfants :

{
	path: '/sellers/:sellerId',
	element: <SellerPage />,
},

N'oubliez pas d'importer les hooks et composants nécessaires dans SellersPage.jsx et App.jsx.

Lançons notre application, chargeons les produits, puis dans le menu de gauche, cliquons sur le lien 'Sellers'. Maintenant nous pouvons aller sur la page de n'importe quel vendeur en cliquant sur son nom, puis sur sa page voir tous ses produits. Et, en cliquant sur n'importe lequel de ses produits, nous accéderons à la page de ce produit.

C'est tout pour le moment. Nous avons étudié les bases de Redux pour créer une application et même un peu plus en profondeur. Nous nous sommes familiarisés avec divers outils utiles. Je vous souhaite bonne chance dans la création de vos applications Redux !

Ouvrez votre application avec les étudiants. Après avoir étudié les matériels de la leçon, dans le dossier teachers créez le fichier TeacherPage.jsx. Dans le code du composant TeacherPage, obtenez l'objet du professeur nécessaire et tous les étudiants de cet enseignant. À l'aide de map, créez à partir d'eux une liste, que le nom complet de chaque étudiant soit un lien vers la page de cet étudiant.

Que dans le rendu retourné, vous ayez un titre avec le nom complet de l'enseignant, en dessous un titre plus petit - avec la matière qu'il enseigne, et encore en dessous la liste de ses étudiants.

Dans App.jsx, connectez une autre route enfant pour la page du professeur.

Lancez votre application et assurez-vous que tout fonctionne.