Redux ilovasiga qo'shimcha mantiq qo'shish

Ushbu mashg'ulotda biz o'zimizning ilovamizga oxirgi komponentni qo'shamiz. Aniqrog'i, biz mahsulotga foydalanuvchi reaktsiyasini qo'shamiz, ya'ni u mahsulotni yoki buyurtma qilgan, yoki unga oid ma'lumotni o'qigan.

Keling, mahsulotlar ilovamizni ochaylik. Sotuvchi nomi bilan bo'lgan holatda bo'lgani kabi, bizga foydalanuvchilarning reaktsiyasini bir nechta joyda ko'rsatish kerak bo'ladi. Bu esa shuni anglatadiki, bizga alohida komponent kerak bo'ladi. Shuning uchun products papkasida UserReactions.jsx faylini yaratishdan boshlaymiz. Keling, boshlash uchun unda o'zimizning reaktsiyalarimiz bo'ladigan obyektni belgilaymiz:

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

Va pastda funktsiyani yozishni boshlaymiz, unga biz product slaysini uzatamiz:

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

Endi jingalak qavs ichida UserReactions funktsiyasining tana qismini yozamiz. Buning uchun map yordamida o'zimizning reactionObj ning kalit-qiymat juftliklarini aylantiramiz, har biri uchun tugma uchun belgini olamiz ('+', '+/-' yoki '-') va shu yoki boshqa reaktsiyaning son qiymatini (biz uni product dan store dan reaktsiya nomi bo'yicha olib olamiz):

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

Va shundan so'ng funktsiya kodining oxirida userReactions tugmalari bilan verstkani qaytaramiz:

return <div>{userReactions}</div>

Va shuningdek index.css ga yana bir oz uslub qo'shamiz:

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

Agar bu biroz chigal ko'rinadigan bo'lsa, xavotirlanmang, keyinroq hammasi aniqroq bo'lib qoladi.

Talabalar ilovangizni oching. Sizning ilovangizda foydalanuvchilar uchun talabalar orasidan guruh starostasini va sport jamoasi kapitani tanlash imkoniyati bo'ladi. Shuning uchun, dars materiallarini o'rganganingizdan so'ng, students papkasida UserVotes.jsx faylini yarating. Fayl boshida votesObj obyektini yarating, unda sizda ikkita xususiyat bo'lsin - leader va captain, qiymatlari GL va TC bo'lsin, tugmalar uchun belgi sifatida.

Faylda pastda obyektni belgilaganingizdan so'ng votesObj funktsiyasining kodini yozing UserVotes, ushbu dars materialiga o'xshab.