Hergebruik van gegevens uit een slice in Redux

In de vorige les hebben we aan het formulier voor het toevoegen van een product nog een veld toegevoegd met een vervolgkeuzelijst voor het selecteren van de verkoper die het plaatst. Laten we aannemen, dat we deze informatie nu ook moeten weergeven op meerdere andere plaatsen in de applicatie. Hiervoor zullen we de code niet elke keer dupliceren, maar gewoon een aparte component maken, waarin we gegevens uit de slice zullen halen en ze weergeven in die delen van de applicatie waar we ze nodig hebben.

Laten we onze productenapplicatie openen. Laten we nu in de map products nog een bestand aanmaken: SellerOfProd.jsx. Laten we om te beginnen de hook useSelector importeren, waarmee we de slice met het juiste product zullen ophalen:

import { useSelector } from 'react-redux'

Laten we vervolgens het juiste product uit de store halen op basis van de verkoper-id, die we zullen doorgeven aan onze nieuwe component in de props:

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

En als zo'n verkoper bestaat, zullen we zijn naam teruggeven, en zo niet, dan geven we 'unknown' terug:

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

Laten we nu onze nieuwe component importeren in ProductsList.jsx en hem plaatsen in de functie ProductsList direct na de titel met de productnaam. Zoals u ziet, hebben we hem de id in de props doorgegeven:

<SellerOfProd sellerId={product.seller} />

Als we nu onze applicatie starten, een nieuw product toevoegen en het in de lijst zoeken, dan zien we dat het een verkoper heeft gekregen, en bij de producten die automatisch zijn toegevoegd bij het opstarten van de applicatie, staat 'unknown'.

Een kleine opmerking: als uw eslint in de editor VS Code klaagt over sellerId, terwijl de applicatie werkt, dan kunt u dit voorlopig negeren of het bestand .eslintrc.cjs van uw applicatie openen en in rules "react/prop-types": "off" toevoegen.

Het spreekt voor zich dat we de informatie over de verkoper ook op de productpagina zouden willen tonen. Hiervoor plaatsen we in de weergave van ProductPage na de titel met de productnaam opnieuw deze regel en controleren we of alles werkt:

<SellerOfProd sellerId={product.seller} />

Open uw applicatie met studenten. Na bestudering van de lesstof, maak in de map students een bestand aan voor de component TeacherForStudent. Het resultaat moet zijn dat de component de volledige naam van de docent teruggeeft, en tussen haakjes het vak dat hij geeft. Vind de juiste docent met behulp van de hook useSelector. Als de docent voor deze student ontbreekt, geef dan 'anonym' weer.

Gebruik de verkregen component uit de vorige opdracht om de gegevens van de docent voor elke student weer te geven op de pagina met de studentenlijst.

Doe hetzelfde als in de vorige opdracht, maar dan voor de afzonderlijke pagina van een student.