Återanvändning av data från ett slice i Redux

I föregående lektion lade vi till ett fält till formuläret för att lägga till en produkt med en rullgardinsmeny för att välja säljare som lägger upp den. Låt oss anta att vi nu också behöver visa denna information på flera andra ställen i applikationen. För att göra detta kommer vi inte att duplicera koden varje gång, utan skapa en separat komponent där vi hämtar data från slicet och visar dem i de delar av applikationen där vi behöver.

Öppna vår produktapplikation. Låt oss nu i mappen products skapa en fil till SellerOfProd.jsx. Till att börja med importerar vi hooken useSelector, med hjälp av vilken vi kommer att få slicet med den önskade produkten:

import { useSelector } from 'react-redux'

Sedan extraherar vi från store den önskade produkten via säljarens id, som vi kommer att skicka till vår nya komponent i props:

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

Och om en sådan säljare finns, kommer vi att returnera dess namn, och om inte, returnerar vi 'unknown':

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

Låt oss nu importera vår nya komponent till ProductsList.jsx och sätta in den i funktionen ProductsList direkt efter rubriken med produktnamnet. Som ni ser gav vi den id i props:

<SellerOfProd sellerId={product.seller} />

Om vi nu startar vår applikation, lägger till en ny produkt och hittar den i listan, kommer vi att se att den har fått en säljare, medan produkterna som automatiskt lades till när applikationen startades kommer att ha 'unknown'.

En liten parentes: om din eslint i redigeraren VS Code klagar på sellerId, men applikationen fungerar, kan du ignorera det för nu eller öppna filen .eslintrc.cjs i din applikation och i rules lägga till "react/prop-types": "off".

Det förstås självklart att vi också skulle vilja lägga till information om säljaren på produktsidan. För att göra detta sätter vi in i renderingen av ProductPage efter rubriken med produktnamnet samma rad igen och kontrollerar att allt fungerar:

<SellerOfProd sellerId={product.seller} />

Öppna din studentapplikation. Efter att ha studerat lektionens material, skapa i mappen students en fil för komponenten TeacherForStudent. Som ett resultat ska komponenten returnera lärarens hela namn, och bredvid inom parentes ämnet som han/hon undervisar i. Hitta den önskade läraren med hjälp av hooken useSelector. Om läraren för denna student saknas, visa 'anonym'.

Med hjälp av den erhållna komponenten från föregående uppgift, visa data för läraren för varje student på sidan med studentlistan.

Gör samma sak som i föregående uppgift, men för den enskilda studentens sida.