Gjenbruk av data fra en slice i Redux

I forrige forelesning la vi til et ekstra felt med en nedtrekksliste for å velge selger som legger den ut i skjemaet for å legge til produkt. La oss anta at vi nå også må vise denne informasjonen på flere steder i applikasjonen. For å gjøre dette vil vi ikke duplisere koden hver gang, men bare lage en egen komponent der vi henter data fra slicen og viser dem i de delene av applikasjonen der vi trenger det.

La oss åpne produktapplikasjonen vår. La oss nå i mappen products opprette en ny fil SellerOfProd.jsx. Til å begynne med, la oss importere hooken useSelector, som vi skal bruke for å hente slicen med det nødvendige produktet:

import { useSelector } from 'react-redux'

Deretter henter vi det nødvendige produktet fra store ved hjelp av selgerens id, som vi skal sende til vår nye komponent i props:

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

Og hvis en slik selger finnes, vil vi returnere navnet deres, og hvis ikke, returnerer vi 'unknown':

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

La oss nå importere vår nye komponent til ProductsList.jsx og sette den inn i funksjonen ProductsList rett etter overskriften med produktnavnet. Som du ser, sendte vi id-en til den i props:

<SellerOfProd sellerId={product.seller} />

Nå, hvis vi starter applikasjonen vår, legger til et nytt produkt og finner det i listen, vil vi se at det har fått en selger, og for produktene som ble lagt til automatisk ved oppstart av applikasjonen, vil det stå 'unknown'.

Et lite sidesprang: Hvis eslint i redigeringsprogrammet VS Code klager på sellerId, men applikasjonen fungerer, kan du ignorere det for nå, eller åpne filen .eslintrc.cjs i applikasjonen din og i rules legge til "react/prop-types": "off".

Det er selvsagt at vi også vil legge til informasjon om selgeren på produktsiden. For å gjøre dette, setter vi inn i koden til ProductPage etter overskriften med produktnavnet denne linjen igjen og sjekker at alt fungerer:

<SellerOfProd sellerId={product.seller} />

Åpne studentapplikasjonen din. Etter å ha studert leksjonsmaterialet, i mappen students, opprett en fil for komponenten TeacherForStudent. Resultatet skal være at komponenten returnerer lærerens fullt navn, og ved siden av i parentes faget som de underviser i. Finn den nødvendige læreren ved hjelp av hooken useSelector. Hvis læreren for denne studenten mangler, vis 'anonym'.

Ved hjelp av komponenten fra forrige oppgave, vis dataene til læreren for hver student på siden med studentlisten.

Gjør det samme som i forrige oppgave, men for den enkelte studentens side.