Genbrug af data fra et slice i Redux

I den forrige lektion tilføjede vi til formularen for tilføjelse af et produkt endnu et felt med en dropdown-liste til valg af sælger, som lægger det ud. Lad os antage, at vi nu også skal vise denne information på flere steder i applikationen. For at gøre dette vil vi ikke hver gang duplikere koden, men blot oprette en separat komponent, hvor vi vil hente data fra slicet og vise dem i de dele af applikationen, hvor vi har brug for det.

Lad os åbne vores produktapplikation. Lad os nu i mappen products oprette endnu en fil SellerOfProd.jsx. Til at starte med importerer vi hook'et useSelector, som vi vil bruge til at hente slicet med det ønskede produkt:

import { useSelector } from 'react-redux'

Dernæst henter vi det ønskede produkt fra store via sælgerens id, som vi vil videregive vores nye komponent via props:

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

Og hvis en sådan sælger findes, vil vi returnere deres navn, og hvis ikke, returnerer vi 'unknown':

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

Lad os nu importere vores nye komponent til ProductsList.jsx og indsætte den i funktionen ProductsList lige efter overskriften med produktnavnet. Som du kan se, gav vi den id'et via props:

<SellerOfProd sellerId={product.seller} />

Hvis vi nu starter vores applikation, tilføjer et nyt produkt og finder det på listen, vil vi se, at det har fået en sælger, og for produkter, der automatisk blev tilføjet under applikationens start, vil der stå 'unknown'.

En lille sidebemærkning: Hvis din eslint i editoren VS Code klager over sellerId, men applikationen fungerer, kan du ignorere det for nu eller åbne filen .eslintrc.cjs i din applikation og tilføje "react/prop-types": "off" under rules.

Det er selvfølgelig givet, at vi også gerne vil tilføje information om sælgeren på produktsiden. For at gøre dette indsætter vi i layoutet for ProductPage efter overskriften med produktnavnet igen denne linje og checker, at alt fungerer:

<SellerOfProd sellerId={product.seller} />

Åbn din applikation med studerende. Efter at have studeret lektionens materiale, skal du i mappen students oprette en fil til komponenten TeacherForStudent. Resultatet skal være, at komponenten returnerer underviserens fulde navn, og ved siden af i parentes det fag, de underviser i. Find den rigtige underviser ved hjælp af hook'et useSelector. Hvis der ikke er nogen underviser for den givne studerende, skal du vise 'anonym'.

Ved hjælp af den opnåede komponent fra forrige opgave, skal du vise data for underviseren for hver studerende på siden med listen over studerende.

Gør det samme som i den forrige opgave, men for den enkelte studerendes side.