Duomenų iš Redux slice pakartotinis naudojimas

Ankstesnėje pamokoje mes prie formos produktui pridėti pridėjome dar vieną lauką su išskleidžiamuoju sąrašu pardavėjo pasirinkimui, kuris jį pateikia. Tarkime, dabar mums reikia šią informaciją atvaizduoti dar kelvietėse programoje. Tam mes kaskart nedubliuosime kodo, o tiesiog sukursime atskirą komponentą, kuriame ištrauksime duomenis iš slice ir atvaizduosime tas programos dalyse, kur mums reikia.

Atidarykime mūsų produktų programą. Dabar aplanke products sukurkime dar failą SellerOfProd.jsx. Pirmiausia importuokime hook'ą useSelector, kurio pagalba mes gausime slice su reikiamu produktu:

import { useSelector } from 'react-redux'

Tada ištraukime iš store reikiamą produktą pagal pardavėjo id, kurį mes perduosime mūsų naujam komponentui props'uose:

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

Ir tuo atveju, jei toks pardavėjas yra, mes grąžinsime jo pavadinimą, o jei ne, tai grąžinsime 'unknown':

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

Dabar importuokime mūsų naująjį komponentą į ProductsList.jsx ir įterpkime jį funkcijoje ProductsList iškart po antraštės su produkto pavadinimu. Kaip matote, mes perduodame jam props'uose id:

<SellerOfProd sellerId={product.seller} />

Dabar, jei paleisime mūsų programą, pridėsime naują produktą ir rasime jį sąraše, pamatysime, kad jis turi pardavėją, o automatiniu būdu pridėti produktai programos paleidimo metu, turės 'unknown'.

Maža pastaba: jei jūsų eslint redaktoriuje VS Code skundžiasi dėl sellerId, o programa veikia, tai galite kol kas ignoruoti tai arba atidaryti failą .eslintrc.cjs jūsų programos ir rules pridėti "react/prop-types": "off".

Savaime suprantama, kad mes norėtume pridėti informaciją apie pardavėją ir produkto puslapyje. Tam įterpkime vaizde ProductPage po antraštės su produkto pavadinimu vėl šią eilutę ir patikrinkime, kad viskas veikia:

<SellerOfProd sellerId={product.seller} />

Atidarykite savo studentų programą. Išstudijavę pamokos medžiagą, aplanke students sukurkite failą komponentui TeacherForStudent. Rezultate komponentas turėtų grąžinti dėstytojo Vardą Pavardę, o šalia skliausteliuose dalyką, kurį jis dėsto. Reikiamą dėstytoją suraskite naudodami hook'ą useSelector. Jei dėstytojas duotam studentui nerastas, atvaizduokite 'anonym'.

Naudodami gautą komponentą iš ankstesnės užduoties atvaizduokite duomenis dėstytojo kiekvienam studentui pushlapyje su studentų sąrašu.

Atlikite tą patį, ką ir ankstesnėje užduotyje, bet atskiram studento pushlapiui.