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:

products/UserReactions.jsxconst reactionObj = {
  good: '+',
  soso: '+/-',
  bad: '-',
}

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

products/UserReactions.jsxexport 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):

products/UserReactions.jsxconst 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:

products/UserReactions.jsxreturn <div>{userReactions}</div>

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

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

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