Լրացուցիչ լոգիկայի ավելացում Redux հավելվածում

Այս զբաղմունքի ընթացքում մենք կավելացնենք վերջին բաղադրիչը մեր հավելվածին: Եթե կոնկրետ լինենք, ապա մենք կավելացնենք ապրանքին օգտատիրոջ արձագանքը, ով կամ պատվիրել է այն, կամ կարդացել է դրա մասին tեղեկություն:

Եկեք բացենք մեր ապրանքների հավելվածը: Ինչպես վաճառողի անվան դեպքում, մեզ անհրաժեշտ է ցույց տալ օգտատերերի արձագանքը հավելվածի մի քանի տեղերում: Իսկ դա նշանակում է, որ մեզ անհրաժեշտ կլինի առանձին բաղադրիչ: Ուստի սկսենք նրանից, որ products պանակում ստեղծենք UserReactions.jsx ֆայլը: Եկեք սկզբի համար գրենք դրա մեջ օբյեկտ, որում կլինեն մեր արձագանքները:

const reactionObj = {
	good: '+',
	soso: '+/-',
	bad: '-',
}

Իսկ ներքևում կսկսենք գրել հենց ֆունկցիան, որին կփոխանցենք product սլայսը:

export const UserReactions = ({ product }) => {}

Այժմ գանգուր փակագծերում գրենք UserReactions ֆունկցիայի մարմինը: Դրա համար կփոխանցենք օգտագործելով map մեր reactionObj-ի բանալի-արժեք զույգերը, յուրաքանչյուրի համար կստանանք նշանակում կոճակի համար ('+', '+/-' կամ '-') և այս կամ այն արձագանքի թվային արժեքը (այն մենք կքաշենք product-ից store-ում արձագանքի անվանմամբ):

const userReactions = Object.entries(reactionObj).map(([name, image]) => {
	return (
		<button key={name} type="button" className="reaction-button">
			{image} {product.reactions[name]}
		</button>
	)
})

Եվ դրանից հետո ֆունկցիայի կոդի վերջում կվերադարձնենք վերստը userReactions կոճակներով:

return <div>{userReactions}</div>

Եվ նաև կավելացնենք ևս մի քանի սթայլ index.css-ում:

.reaction-button {
	margin-right: 10px;
	margin-bottom: 10px;
}

Եթե դա մի քանի շփոթված է թվում, մի անհանգստացեք, հետագայում ձեզ համար ամեն ինչ շատ ավելի հասկանալի կդառնա:

Բացեք ձեր ուսանողների հավելվածը: Ձեր հավելվածում կլինի հնարավորություն օգտատերերի համար ընտրել ուսանողներից խմբի պրեֆեկտ և սպորտային հավաքականի ավագ: Ուստի, ուսումնասիրելով դասի նյութերը, ստեղծեք students պանակում UserVotes.jsx ֆայլը: Ֆայլի սկզբում ստեղծեք votesObj օբյեկտը, որում կլինի երկու հատկություն - leader և captain, GL և TC արժեքներով, որպես կոճակների համար նշանակում:

Ներքևում ֆայլում օբյեկտի սահմանումից հետո գրեք UserVotes ֆունկցիայի կոդը, ըստ անալոգիայի այս դասի նյութի հետ: