Viacnásobné použitie údajov z slice v Reduxe

Na minulej hodine sme pridali k formuláru na pridanie produktu ďalšie pole s rozbaľovacím zoznamom na výber predajcu, ktorý ho zverejňuje. Predpokladajme, teraz potrebujeme zobraziť túto informáciu aj na niekoľkých ďalších miestach aplikácie. Na to nebudeme každý raz duplikovať kód, ale jednoducho vytvoríme samostatný komponent, v ktorom budeme extrahovať údaje z slice a zobrazovať ich v tých častiach aplikácie, kde potrebujeme.

Otvorme našu aplikáciu s produktmi. Poďme teraz v priečinku products vytvoriť ešte súbor SellerOfProd.jsx. Na začiatok importujme hook useSelector, pomocou ktorého budeme získavať slice s potrebným produktom:

import { useSelector } from 'react-redux'

Potom extrahujme z store potrebný produkt podľa id predajcu, ktorý budeme odovzdávať nášmu novému komponentu v props:

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

A v prípade, že taký predajca existuje, budeme vracať jeho názov, a ak nie, vrátime 'unknown':

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

Poďme teraz importovať náš nový komponent do ProductsList.jsx a vložme ho do funkcie ProductsList hneď po nadpise s názvom produktu. Ako vidíte, odovzdali sme mu v props id:

<SellerOfProd sellerId={product.seller} />

Teraz, ak spustíme našu aplikáciu, pridáme nový produkt a nájdeme ho v zozname, uvidíme, že má predajcu, a pri produktoch, ktoré boli automaticky pridané pri spustení aplikácie, bude 'unknown'.

Malá odbočka: ak váš eslint v editore VS Code hlási chybu na sellerId, a aplikácia funguje, môžete to zatiaľ ignorovať alebo otvoriť súbor .eslintrc.cjs vašej aplikácie a v rules pridať "react/prop-types": "off".

Samozrejme, že by sme chceli pridať informáciu o predajcovi aj na stránke produktu. Na to vložme v renderovaní ProductPage po nadpise s názvom produktu znova tento riadok a skontrolujme, že všetko funguje:

<SellerOfProd sellerId={product.seller} />

Otvorte vašu aplikáciu so študentmi. Po preštudovaní materiálu lekcie, v priečinku students vytvorte súbor pre komponent TeacherForStudent. Výsledne by komponent mal vracať meno priezvisko učiteľa, a vedľa v zátvorkách predmet, ktorý učí. Potrebného učiteľa nájdite pomocou hooku useSelector. Ak učiteľ pre daného študenta chýba, zobrazte 'anonym'.

Pomocou získaného komponentu z predchádzajúcej úlohy zobrazte údaje učiteľa pre každého študenta na stránke so zoznamom študentov.

Urobte to isté, čo v predchádzajúcej úloha, ale pre samostatnej stránky študenta.