Višestruko korišćenje podataka iz slice-a u Redux-u

Na prošlom času smo formi za dodavanje proizvoda dodali još jedno polje sa padajućim menijem za izbor prodavca koji ga postavlja. Pretpostavimo, sada nam je takođe potrebno da prikažemo ovu informaciju još na nekoliko mesta u aplikaciji. Za ovo nećemo svaki put duplirati kod, već ćemo jednostavno kreirati posebnu komponentu, u kojoj ćemo izvlačiti podatke iz slice-a i prikazivati ih u onim delovima aplikacije gde nam je potrebno.

Otvorimo našu aplikaciju sa proizvodima. Hajde sada u folderu products kreirati još jedan fajl SellerOfProd.jsx. Za početak importujemo hook useSelector, pomoću koga ćemo dobiti slice sa potrebnim proizvodom:

import { useSelector } from 'react-redux'

Zatim ćemo iz store-a izvući potrebni proizvod po id-u prodavca, koji ćemo proslediti našoj novoj komponenti u props-ima:

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

I u slučaju da takav prodavac postoji, vratićemo njegov naziv, a ako ne, vratićemo 'unknown':

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

Hajde sada da importujemo našu novu komponentu u ProductsList.jsx i ubacimo je u funkciji ProductsList odmah posle naslova sa nazivom proizvoda. Kao što vidite, prosledili smo mu u props-ima id:

<SellerOfProd sellerId={product.seller} />

Sada, ako pokrenemo našu aplikaciju, dodamo novi proizvod i nađemo ga u listi, videćemo da je kod njega pojavio prodavac, a kod proizvoda, automatski dodatih prilikom pokretanja aplikacije, biće 'unknown'.

Mali napomena: ako vaš eslint u editoru VS Code prijavljuje grešku na sellerId, a aplikacija radi, onda možete za sada to zanemariti ili otvoriti fajl .eslintrc.cjs vaše aplikacije i u rules dodati "react/prop-types": "off".

Podrazumeva se da bismo želeli dodati informaciju o prodavcu i na stranici proizvoda. Za ovo ubacimo u renderovanju ProductPage posle naslova sa nazivom proizvoda opet ovu liniju i proverimo da li sve radi:

<SellerOfProd sellerId={product.seller} />

Otvorite vašu aplikaciju sa studentima. Nakon što ste proučili materijal lekcije, u folderu students kreirajte fajl za komponentu TeacherForStudent. Kao rezultat, komponenta treba da vrati puno ime i prezime predavača, a pored u zagradama predmet koji on predaje. Potrebnog predavača nađite pomoću hook-a useSelector. Ako predavač za datog studenta ne postoji, prikažite 'anonym'.

Pomoću dobijene komponente iz prethodnog zadatka prikažite podatke predavača za svakog studenta na stranici sa listom studenata.

Uradite isto što i u prethodnom zadatku, ali za posebnu stranicu studenta.