Տվյալների բազմակի օգտագործում Redux-ի սլայսից

Նախորդ դասին մենք ավելացրեցինք արտադրանք ավելացնելու ձևին ևս մեկ դաշտ՝ բացվող ցուցակով վաճառողի ընտրության համար, ով այն տեղադրում է: Ենթադրենք, հիմա մեզ անհրաժեշտ է այս տեղեկատվությունը ցուցադրել նաև հավելվածի մի քանի այլ վայրերում: Դրա համար մենք ամեն անգամ չենք կրկնօրինակի կոդը, այլ պարզապես կստեղծենք առանձին բաղադրիչ, որում կվերցնենք տվյալները սլայսից և կցուցադրենք հավելվածի այն մասերում, որտեղ դա մեզ անհրաժեշտ է:

Բացենք մեր արտադրանքներով հավելվածը: Արի այժմ products պանակում ստեղծենք ևս մեկ ֆայլ՝ SellerOfProd.jsx: Սկզբից իմպորտ անենք useSelector կեռիկը, որի օգնությամբ մենք կստանանք անհրաժեշտ արտադրանքով սլայսը:

import { useSelector } from 'react-redux'

Այնուհետև store-ից կվերցնենք անհրաժեշտ արտադրանքը ըստ վաճառողի id-ի, որը մենք կփոխանցենք մեր նոր բաղադրիչին պրոպսով:

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

Իսկ եթե այդպիսի վաճառող կա, մենք կվերադարձնենք նրա անունը, իսկ եթե ոչ, ապա կվերադարձնենք 'unknown':

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

Արի այժմ իմպորտ անենք մեր նոր բաղադրիչը ProductsList.jsx-ում և տեղադրենք այն ProductsList ֆունկցիայում անմիջապես արտադրանքի անվանումով վերնագրից հետո: Ինչպես տեսնում եք, մենք նրան պրոպսով փոխանցեցինք id-ն:

<SellerOfProd sellerId={product.seller} />

Այժմ, եթե մենք գործարկենք մեր հավելվածը, ավելացնենք նոր արտադրանք և գտնենք այն ցուցակում, ապա կտեսնենք, որ այն ձեռք է բերել վաճառող, իսկ հավելվածի գործարկման ժամանակ ավտոմատ ավելացված արտադրանքների համար կլինի 'unknown':

Մի փոքր շեղում. եթե ձեր eslint-ը VS Code խմբագրում բողոքում է sellerId-ից, իսկ հավելվածն աշխատում է, ապա կարող եք ժամանակավոր անտեսել դա կամ բացել հավելվածի .eslintrc.cjs ֆայլը և rules-ում ավելացնել "react/prop-types": "off":

Ինքնին հասկանալի է, որ մենք կցանկանայինք ավելացնել վաճառողի մասին տեղեկատվությունը նաև արտադրանքի էջում: Դրա համար տեղադրենք ProductPage-ի վերլուծության մեջ կրկին այս տողը և ստուգենք, որ ամեն ինչ աշխատում է:

<SellerOfProd sellerId={product.seller} />

Բացեք ձեր ուսանողներով հավելվածը: Ուսումնասիրելով դասի նյութը՝ students պանակում ստեղծեք ֆայլ TeacherForStudent բաղադրիչի համար: Արդյունքում բաղադրիչը պետք է վերադարձնի դասախոսի ԱԱՀ-ն, իսկ կողքին փակագծերում այն առարկան, որը նա դասավանդում է: Անհրաժեշտ դասախոսին գտեք օգտագործելով useSelector կեռիկը: Եթե այդ ուսանողի համար դասախոս չկա, ցուցադրեք 'anonym':

Օգտագործելով նախորդ առաջադրանքում ստացված բաղադրիչը՝ ցուցադրեք դասախոսի տվյալները յուրաքանչյուր ուսանողի համար ուսանողների ցուցակի էջում:

Կատարեք նույնը, ինչ նախորդ առաջադրանքում, բայց առանձին ուսանողի էջի համար: