Lisälogiikan lisääminen Redux-sovellukseen

Tällä oppitunnilla lisäämme viimeisen komponentin sovellukseemme. Tarkemmin sanottuna lisäämme tuotteelle käyttäjän reaktion, joko tilannut tai lukenut siitä tietoa.

Avataan tuotesovelluksemme. Kuten myyjän nimen kohdalla, meidän tulee näyttää käyttäjien reaktiot useassa kohdassa sovellusta. Tämä tarkoittaa, että tarvitsemme erillisen komponentin. Siksi aloitamme luomalla kansioon products tiedoston UserReactions.jsx. Aluksi määritellään siihen objekti, joka sisältää reaktionsa:

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

Ja alapuolelle alamme kirjoittaa itse funktion, johon välitämme slicen product:

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

Nyt aaltosulkeisiin kirjoitamme funktion UserReactions rungon. Tätä varten käymme läpi map:lla reactionObj:mme avain-arvo-parit, saamme kullekin painikkeen merkinnän ('+', '+/-' tai '-') ja numeerisen arvon tietylle reaktiolle (sen vedämme product:sta storeen reaktion nimen perusteella):

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

Ja tämän jälkeen funktion koodin lopussa palautamme renderöinnin painikkeilla userReactions:

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

Ja lisäämme myös hieman tyylejä tiedostoon index.css:

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

Jos tämä vaikuttaa hieman sekavalta, älä huoli, myöhemmin kaikki selkiytyy paljon.