Liste des vendeurs dans Redux

Lors des leçons précédentes, nous avons terminé la matière principale. Maintenant, en utilisant thunk, nous obtenons la liste des produits depuis le serveur et pouvons sauvegarder un nouveau produit sur le serveur. Occupons-nous des vendeurs. Après tout, nous obtenons aussi des données pour eux. Créons une page séparée avec la liste des vendeurs.

Ouvrons notre application avec les produits, et dans celle-ci le dossier sellers. Créons dans ce dossier le fichier SellersList.jsx. Ici, nous utiliserons useSelector, Link et selectAllSellers, dont nous écrirons le code dans sellersSlice.js un peu plus tard :

import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

Ensuite, créons le SellersList lui-même. Dedans, nous obtiendrons tous les vendeurs à l'aide du hook useSelector, puis nous obtiendrons le rendu pour la liste des vendeurs dans une boucle map, chaque nom de vendeur devant mener vers sa page. Et à la fin, nous retournerons le rendu avec le titre et la liste obtenue :

export const SellersList = () => {
	const sellers = useSelector(selectAllSellers)
	const sellersToRender = sellers.map((seller) => (
		<li key={seller.id}>
			<Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
		</li>
	))

	return (
		<div>
			<h2>Vendeurs :</h2>

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

Ensuite, allons dans le fichier sellersSlice.js et, par analogie avec les sélecteurs dans productsSlice.js, créons à la toute fin du fichier deux sélecteurs après l'export du réducteur :

export const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

Maintenant, nous devons définir la route pour la page avec la liste, pour cela ouvrons le fichier App.jsx et dans le tableau des routes enfants children ajoutons un autre objet (n'oubliez pas d'importer le composant SellersList) :

{
	path: '/sellers',
	element: <SellersList />,
},

Pour que notre lien 'Sellers' dans le menu fonctionne, allons dans le fichier root.jsx (cela remonte à loin ... ) et remplaçons la balise a par l'élément NavLink :

<NavLink to="/sellers" end>
	Vendeurs
</NavLink>

Et dernière chose. Pour que dans notre menu le lien actif soit mis en évidence, et qu'il soit compréhensible sur quelle page nous nous trouvons, nous ajouterons un style dans index.css :

nav a.active {
	color: purple;
}

Lançons notre application. Maintenant nous pouvons aller sur la page des vendeurs en cliquant sur 'Vendeurs' dans le menu. Avant, bien sûr, il faut cliquer sur 'Produits' dans le menu, sinon nos produits ne se chargeront pas. Dans la prochaine leçon, nous créerons une page pour chaque vendeur et nous terminerons l'étude de ce tutoriel sur 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 TeachersList.jsx. À l'aide de ce composant, vous afficherez la liste des enseignants. Importez-y les composants et hooks nécessaires.

Écrivez le code pour le composant TeachersList, obtenez-y tous les enseignants et créez une liste d'enseignants teachersToRender, que dans chaque ligne de cette liste s'affichent leurs noms de famille et initiales, et entre parenthèses la matière qu'ils enseignent. Que chaque nom complet soit un lien menant vers une page séparée pour chaque enseignant. Puis à la fin du code du composant, retournez le rendu avec le titre et la liste créée.

À la fin du fichier teachersSlice.js, créez une paire de fonctions-sélecteurs selectAllTeachers et selectTeacherById, comme montré dans la leçon.

Dans App.jsx, connectez une autre route enfant pour la page des enseignants.

Dans le fichier root.jsx dans le menu pour 'Teachers' remplacez la balise a par NavLink, comme montré dans la leçon. Faites en sorte que le lien actif dans le menu soit mis en évidence d'une certaine manière, en ajoutant pour cela des styles dans index.css.