Ripërdorimi i të dhënave nga një slice në Redux

Në seancën e kaluar ne i shtuam formës për shtimin e produktit një fushë tjetër me një listë rënëse për të zgjedhur shitësin, që e poston atë. Le të supozojmë, tani ne gjithashtu duhet të shfaqim këtë informacion në disa vende të tjera të aplikacionit. Për këtë ne nuk do ta duplikojmë kodin çdo herë, thjesht do të krijojmë një komponent të veçantë, ku do të nxjerrim të dhënat nga slice dhe do t'i shfaqim ato në ato pjesë të aplikacionit ku na duhet.

Le të hapim aplikacionin tonë me produktet. Tani le të krijojmë në dosjen products edhe një skedar SellerOfProd.jsx. Për fillim le të importojmë hook useSelector, me ndihmën e të cilit ne do të marrim slice-n me produktin e nevojshëm:

import { useSelector } from 'react-redux'

Pastaj le të nxjerrim nga store produktin e nevojshëm sipas id së shitësit, të cilin do ta kalojmë komponentit tonë të ri në props:

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

Dhe në rast se ekziston një shitës i tillë, ne do të kthejmë emrin e tij, ndërsa nëse jo, do të kthejmë 'unknown':

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

Tani le të importojmë komponentin tonë të ri në ProductsList.jsx dhe ta vendosim atë në funksionin ProductsList menjëherë pas titullit me emrin e produktit. Siç e shihni, ne i kemi kaluar atij në props id-n:

<SellerOfProd sellerId={product.seller} />

Tani, nëse e nisim aplikacionin tonë, shtojmë një produkt të ri dhe e gjejmë atë në listë, do të shohim se ai ka fituar një shitës, ndërsa produktet e shtuar automatikisht gjatë nisfit të aplikacionit, do të kenë 'unknown'.

Një sqarim i vogël: nëse eslint-i juaj në editorin VS Code ankohet për sellerId, ndërsa aplikacioni funksionon, atëherë mund të injoroni këtë për momentin ose të hapni skedarin .eslintrc.cjs të aplikacionit tuaj dhe në rules të shtoni "react/prop-types": "off".

Është e qartë se ne do të donim të shtonim informacionin mbi shitësin edhe në faqen e produktit. Për këtë le të vendosim në renderimin e ProductPage pas titullit me emrin e produktit përsëri këtë rresht dhe të kontrollojmë që gjithçka funksionon:

<SellerOfProd sellerId={product.seller} />

Hapni aplikacionin tuaj me studentët. Pasi keni studiuar materialin e mësimit, në dosjen students krijoni një skedar për komponentin TeacherForStudent. Si rezultat, komponenti duhet të kthejë emrin e plotë të mësuesit, dhe pranë në kllapa lëndën që ai jep. Mësuesin e nevojshëm gjeni me ndihmën e hook useSelector. Nëse mësuesi për këtë student mungon, shfaq 'anonym'.

Me ndihmën e komponentit të marrë nga detyra e mëparshme, shfaqni të dhënat e mësuesit për çdo student në faqen me listën e studentëve.

Bëni të njëjtën gjë si në detyrën e mëparshme, por për faqen e veçantë të studentit.