Datu atkārtota izmantošana no Redux slīkšņa

Iepriekšējā nodarbībā mēs pievienojām formai produkta pievienošanai vēl vienu lauku ar nolaižamo sarakstu pārdevēja izvēlei, kurš to ievieto. Pieņemsim, ka tagad mums šī informācija jāparāda vēl vairākās lietojumprogrammas vietās. Šim nolūkam mēs nekatru reizi nedublēsim kodu, bet vienkārši izveidosim atsevišķu komponentu, kurā iegūsim datus no slīkšņa un attēlosim tos lietojumprogrammas daļās, kur mums nepieciešams.

Atvērsim mūsu produktu lietojumprogrammu. Tagad mapē products izveidosim vēl vienu failu SellerOfProd.jsx. Sākumā importēsim āķi useSelector, ar kura palīdzību mēs iegūsim slīksni ar vajadzīgo produktu:

import { useSelector } from 'react-redux'

Pēc tam no store izvilksim vajadzīgo produktu pēc pārdevēja id, ko mēs nodosim mūsu jaunajam komponentam props:

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

Un gadījumā, ja šāds pārdevējs pastāv, mēs atgriezīsim viņa nosaukumu, bet ja nē, tad atgriezīsim 'unknown':

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

Tagad importēsim mūsu jauno komponentu ProductsList.jsx un ievietosim to funkcijā ProductsList uzreiz pēc virsraksta ar produkta nosaukumu. Kā redzat, mēs tam nodotām props id:

<SellerOfProd sellerId={product.seller} />

Tagad, ja mēs palaidīsim mūsu lietojumprogrammu, pievienosim jaunu produktu un atradīsim to sarakstā, tad redzēsim, ka tam parādījās pārdevējs, bet produktiem, kas automātiski pievienoti lietojumprogrammas palaišanas laikā, būs 'unknown'.

Neliels novirziens: ja jūsu eslint redaktorā VS Code sūdzas par sellerId, bet lietojumprogramma strādā, tad varat pagaidām to ignorēt vai atvērt failu .eslintrc.cjs jūsu lietojumprogrammas un rules pievienot "react/prop-types": "off".

Pats par sevi saprotams, ka mēs gribētu pievienot informāciju par pārdevēju arī produkta lapā. Šim nolūkam ievietosim izstrādājumā ProductPage pēc virsraksta ar produkta nosaukumu vēlreiz šo rindiņu un pārbaudīsim, ka viss darbojas:

<SellerOfProd sellerId={product.seller} />

Atveriet savu studentu lietojumprogrammu. Izpētījuši nodarbības materiālu, mapē students izveidojiet failu komponentam TeacherForStudent. Rezultātā komponentam jāatgriež pasniedzēja Vārds Uzvārds, un blakus iekavās priekšmetu, ko viņš pasniedz. Vajadzīgo pasniedzēju atrodiet ar āķa useSelector palīdzību. Ja pasniedzējs šim studentam nav atrodams, attēlojiet 'anonym'.

Ar iepriekšējā uzdevumā iegūtā komponenta palīdzību attēlojiet pasniedzēja datus katram studentam lapā ar studentu sarakstu.

Izdariet to pašu, ko iepriekšējā uzdevumā, bet atsevišķai studenta lapai.