Dodajanje dodatne logike v aplikacijo Redux

V tem poglavju bomo dodali zadnjo komponento k naši aplikaciji. Če smo natančni, bomo izdelku dodali odziv uporabnika, ki ga je bodisi naročil ali prebral informacije o njem.

Odprimo našo aplikacijo s produkti. Kot v primeru imena prodajalca, moramo pokazati odzive uporabnikov na več mestih v aplikaciji. Kar pomeni, da bomo potrebovali ločeno komponento. Zato začnimo tako, da v mapi products ustvarimo datoteko UserReactions.jsx. Za začetek vanjo vpišimo objekt, v katerem bodo naši odzivi:

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

Spodaj pa začnimo pisati samo funkcijo, v katero bomo podali slice product:

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

Zdaj v zavitih oklepajih napišimo telo funkcije UserReactions. Za to iterirajmo s pomočjo map pare ključ-vrednost našega reactionObj, za vsakogar pridobimo oznako za gumb ('+', '+/-' ali '-') in številčno vrednost določenega odziva (to bomo potegnili iz product v store po imenu odziva):

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

In po tem na koncu kode funkcije vrnimo HTML z gumbi userReactions:

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

Ter dodajmo še nekaj stilov v index.css:

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

Če se vam to zdi nekoliko zapleteno, ne skrbite, kasneje vam bo postalo veliko bolj razumljivo.