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

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

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

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

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

products/UserReactions.jsxexport const UserReactions = ({ product }) => {}

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

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

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

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

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

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

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