Dodavanje dodatne logike u Redux aplikaciju

Na ovoj lekciji ćemo dodati poslednji komponent našoj aplikaciji. Da budemo precizni, dodavaćemo proizvodu reakciju korisnika, koji ga je ili naručio, ili pročitao o njemu informaciju.

Hajde da otvorimo našu aplikaciju sa proizvodima. Kao i u slučaju imena prodavca, nama je potrebno da prikažemo reakcije korisnika na nekoliko mesta u aplikaciji. A to znači, da će nam trebati poseban komponent. Zato počnimo sa tim, da u folderu products kreiramo fajl UserReactions.jsx. Hajde za početak da ispišemo u njemu objekat, u kome će biti naše reakcije:

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

A ispod počnimo da pišemo samu funkciju, u koju ćemo proslediti isečak product:

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

Sada u vitičastim zagradama napišimo telo funkcije UserReactions. Za ovo prođimo pomoću map parove ključ-vrednost našeg reactionObj, za svaki dobijemo oznaku za dugme ('+', '+/-' ili '-') i numeričku vrednost te ili one reakcije (nju mi izvlačimo iz product u store po nazivu reakcije):

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

I posle ovoga na kraju koda funkcije vratimo verstanje sa dugmadima userReactions:

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

A takođe dodajmo još malo stilova u index.css:

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

Ako ovo izgleda pomalo zbunjujuće, ne brinite, kasnije će vam sve postati mnogo jasnije.