Pridanie dodatočnej logiky do aplikácie Redux

V tejto lekcii pridáme poslednú komponentu do našej aplikácie. Ak máme byť konkrétnejší, pridáme k produktu reakciu používateľa, ktorý ho buď objednal, alebo si o ňom prečítal informácie.

Otvorme našu aplikáciu s produktami. Rovnako ako v prípade názvu predajcu, potrebujeme ukázať reakcie používateľov na niekoľkých miestach aplikácie. A to znamená, že budeme potrebovať samostatnú komponentu. Preto začneme tým, že v priečinku products vytvoríme súbor UserReactions.jsx. Na začiatok do neho zadefinujme objekt, v ktorom budú naše reakcie:

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

A nižšie začneme písať samotnú funkciu, do ktorej budeme odovzdávať slice product:

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

Teraz do zložených zátvoriek napíšme telo funkcie UserReactions. Na to preiterujeme pomocou map páry kľúč-hodnota nášho reactionObj, pre každú získame označenie pre tlačidlo ('+', '+/-' alebo '-') a číselnú hodnotu tej ktorej reakcie (budeme ju ťahať z product v store podľa názvu reakcie):

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

A potom na konci kódu funkcie vrátime šablónu s tlačidlami userReactions:

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

A tiež pridajme ešte nejaké štýly do index.css:

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

Ak to vyzerá trochu mätúco, nebuďte znepokojení, neskôr vám bude všetko oveľa zrozumiteľnejšie.