Réutilisation multiple des données du slice dans Redux

Lors de la dernière leçon, nous avons ajouté au formulaire d'ajout de produit un autre champ avec une liste déroulante pour sélectionner le vendeur qui le met en ligne. Supposons que nous devions maintenant afficher cette information dans plusieurs autres endroits de l'application. Pour cela, nous ne dupliquerons pas le code à chaque fois, mais nous créerons simplement un composant séparé, dans lequel nous extrairons les données du slice et nous les afficherons dans les parties de l'application où nous en avons besoin.

Ouvrons notre application de produits. Maintenant, créons dans le dossier products un autre fichier SellerOfProd.jsx. Pour commencer, importons le hook useSelector, à l'aide duquel nous obtiendrons le slice avec le produit nécessaire :

import { useSelector } from 'react-redux'

Ensuite, extrayons du store le produit nécessaire par l'id du vendeur, que nous transmettrons à notre nouveau composant dans les props :

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

Et dans le cas où un tel vendeur existe, nous retournerons son nom, et sinon, nous retournerons 'unknown' :

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

Maintenant, importons notre nouveau composant dans ProductsList.jsx et insérons-le dans la fonction ProductsList immédiatement après le titre avec le nom du produit. Comme vous pouvez le voir, nous lui avons passé l'id dans les props :

<SellerOfProd sellerId={product.seller} />

Maintenant, si nous lançons notre application, ajoutons un nouveau produit et le trouvons dans la liste, nous verrons qu'il a un vendeur, et que les produits ajoutés automatiquement au démarrage de l'application auront 'unknown'.

Une petite digression : si votre eslint dans l'éditeur VS Code signale une erreur sur sellerId, mais que l'application fonctionne, vous pouvez ignorer cela pour l'instant ou ouvrir le fichier .eslintrc.cjs de votre application et dans rules ajouter "react/prop-types": "off".

Il va de soi que nous aimerions ajouter les informations sur le vendeur également sur la page du produit. Pour cela, insérons dans le rendu de ProductPage après le titre avec le nom du produit à nouveau cette ligne et vérifions que tout fonctionne :

<SellerOfProd sellerId={product.seller} />

Ouvrez votre application avec les étudiants. Après avoir étudié le matériel de la leçon, dans le dossier students créez un fichier pour le composant TeacherForStudent. En conséquence, le composant doit retourner le nom complet de l'enseignant, et entre parenthèses à côté la matière qu'il enseigne. Trouvez l'enseignant nécessaire à l'aide du hook useSelector. Si l'enseignant pour cet étudiant est absent, affichez 'anonym'.

À l'aide du composant obtenu dans la tâche précédente, affichez les données de l'enseignant pour chaque étudiant sur la page de la liste des étudiants.

Faites la même chose que dans la tâche précédente, mais pour la page individuelle de l'étudiant.