Lisaloogika lisamine Redux rakendusse

Sellel tunniplokil lisame oma rakendusele viimase komponendi. Täpsemalt lisame tootele kasutaja reaktsiooni, kas kasutaja on selle tellinud või lugenud selle kohta infot.

Avame oma tooterakenduse. Nagu müüja nime puhul, peame kasutajate reaktsioone näitama mitu kohta rakenduses. See tähendab, et vajame eraldi komponenti. Seega alustame sellest, et kaustas products loome faili UserReactions.jsx. Alustuseks kirjutame sinna objekti, milles on meie reaktsioonid:

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

Ja allpool hakkame kirjutama funktsiooni ennast, millele anname edasi lõigu product:

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

Nüüd kirjutame looksulgudesse funktsiooni UserReactions keha. Selleks loome kasutades map meie reactionObj võtme-väärtus paarid, igaühe jaoks saame nupu tähise ('+', '+/-' või '-') ja arvulise reaktsiooni väärtuse (saa me võtame selle product-st store'ist reaktsiooni nime järgi):

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 pärast seda tagastame funktsiooni lõpus nuputempli nuppudega userReactions:

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

Ja lisaks lisame veel natuke stiile faili index.css:

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

Kui see tundub segadust tekitav, ärge muretsege, edasi saab kõik palju selgemaks.