Matumizi Mengi ya Data kutoka kwa Slice katika Redux

Katika somo lililopita tuliongeza kwenye fomu ya kuongeza bidhaa uga mwingine wenye orodha inayotolewa kwa ajili ya kuchagua muuzaji, ambaye anaiweka. Hebu tufikiri, sasa tunahitaji pia kuonyesha taarifa hii katika sehemu kadhaa za programu. Kwa ajili ya hili, hatutarudia msimbo kila wakati, bali tutaunda kipengele tofauti, ambacho tutachukua data kutoka kwa slice na kuionyesha katika sehemu za programu tunazohitaji.

Wacha tufungue programu yetu ya bidhaa. Hebu sasa katika folda products tuunde faili nyingine SellerOfProd.jsx. Kwa mwanzo leta kichocheo useSelector, kwa kutumia ambayo tutapata slice na bidhaa inayohitajika:

import { useSelector } from 'react-redux'

Kisha tutochote kutoka kwa store bidhaa inayohitajika kwa kutumia kitambulisho cha muuzaji, ambacho tutakipeleka kwenye kipengele chetu kipya kwenye props:

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

Na ikiwa kuna muuzaji kama huyo, tutarudisha jina lake, na ikiwa hakuna, tutarudisha 'unknown':

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

Hebu sasa tulete kipengele chetu kipya kwenye ProductsList.jsx na tukichomeke katika kitendakazi ProductsList mara moja baada ya kichwa chenye jina la bidhaa. Kama unavyoona, tumepeleka kitambulisho chake kwenye props:

<SellerOfProd sellerId={product.seller} />

Sasa, ikiwa tutaanzisha programu yetu, tutaongeza bidhaa mpya na tukipate kwenye orodha, tutaona kwamba imepata muuzaji, na kwa bidhaa zilizoongezwa kiotomatiki wakati wa kuanzisha programu, zitakuwa na 'unknown'.

Mkengeuo mdogo: ikiwa eslint yako kwenye kihariri cha VS Code inalalamika kuhusu sellerId, na programu inafanya kazi, basi unaweza kupuuza hii kwa sasa au kufungua faili .eslintrc.cjs ya programu yako na kwenye rules ongeza "react/prop-types": "off".

Ni wazi, tungetaka kuongeza taarifa kuhusu muuzaji na kwenye ukurasa wa bidhaa. Kwa ajili ya hii, tutachomeke katika muundo wa ProductPage baada ya kichwa chenye jina la bidhaa mstari huu tena na tuangalie ikiwa kila kitu kinafanya kazi:

<SellerOfProd sellerId={product.seller} />

Fungua programu yako ya wanafunzi. Baada ya kusoma nyenzo za somo, katika folda students unda faili kwa ajili ya kipengele TeacherForStudent. Matokeo yake, kipengele kinapaswa kurudisha Jina Kamili la mwalimu, na karibu kwenye mabano somo analofundisha. Mwalimu anayehitajika tafuta kwa kutumia kichocheo useSelector. Ikiwa hakuna mwalimu kwa ajili ya mwanafunzi huyu, onyesha 'anonym'.

Kwa kutumia kipengee kilichopatikana kutoka kwenye shida iliyotangulia, onyesha data za mwalimu kwa kila mwanafunzi kwenye ukurasa wenye orodha ya wanafunzi.

Fanya kitu kile kile, kama katika shida iliyotangulia, lakini kwa ukurasa tofauti wa mwanafunzi.