Večkratna uporaba podatkov iz slice-a v Redux-u

V prejšnji lekciji smo obrazcu za dodajanje izdelka dodali še eno polje z spustnim seznamom za izbiro prodajalca, ki ga objavlja. Predpostavimo, da moramo zdaj te podatke prikazati še na več mestih v aplikaciji. Za to ne bomo vsakič podvajali kode, ampak bomo preprosto ustvarili ločeno komponento, v kateri bomo pridobili podatke iz slice-a in jih prikazali v tistih delih aplikacije, kjer jih potrebujemo.

Odprimo našo aplikacijo z izdelki. Ustvarimo zdaj v mapi products še datoteko SellerOfProd.jsx. Za začetek uvažajmo hook useSelector, s pomočjo katerega bomo pridobili slice z želenim izdelkom:

import { useSelector } from 'react-redux'

Nato izvlečimo iz store potrebni izdelek po id-ju prodajalca, ki ga bomo posredovali naši novi komponenti v props:

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

In v primeru, da tak prodajalec obstaja, bomo vrnili njegovo ime, če pa ne, bomo vrnili 'unknown':

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

Uvažajmo zdaj našo novo komponento v ProductsList.jsx in vstavimo jo v funkciji ProductsList takoj za naslovom z imenom izdelka. Kot vidite, smo mu v props podali id:

<SellerOfProd sellerId={product.seller} />

Če zdaj zaženemo našo aplikacijo, dodamo nov izdelek in ga poiščemo na seznamu, bomo videli, da je dobil prodajalca, izdelki, ki so bili samodejno dodani ob zagonu aplikacije, pa bodo imeli 'unknown'.

Majhna opomba: če se vaš eslint v urejevalniku VS Code pritožuje nad sellerId, aplikacija pa deluje, lahko to za zdaj prezrete ali odprete datoteko .eslintrc.cjs vaše aplikacije in v rules dodajte "react/prop-types": "off".

Samoumevno je, da bi želeli dodati podatke o prodajalcu tudi na strani izdelka. Za to vstavimo v predlogi ProductPage za naslovom z imenom izdelka spet to vrstico in preverimo, da vse deluje:

<SellerOfProd sellerId={product.seller} />

Odprite vašo aplikacijo s študenti. Po preučitvi gradiva lekcije, v mapi students ustvarite datoteko za komponento TeacherForStudent. Kot rezultat naj komponenta vrne polno ime učitelja, zraven v oklepajih pa predmet, ki ga poučuje. Zahtevanega učitelja poiščite s pomočjo hooka useSelector. Če učitelj za danega študenta manjka, izpišite 'anonym'.

S pomočjo pridobljene komponente iz prejšnje naloge prikažite podatke učitelja za vsakega študenta na strani s seznamom študentov.

Naredite enako kot v prejšnji nalogi, vendar za posamezno stran študenta.