Přidání dodatečné logiky do aplikace Redux

V této lekci přidáme poslední komponentu do naší aplikace. Abychom byli konkrétní, přidáme k produktu reakci uživatele, který jej buď objednal, nebo si o něm přečetl informace.

Pojďme otevřít naši aplikaci s produkty. Stejně jako v případě názvu prodejce potřebujeme zobrazit reakce uživatelů na několika místech aplikace. A to znamená, že budeme potřebovat samostatnou komponentu. Proto začněme tím, že ve složce products vytvoříme soubor UserReactions.jsx. Pojďme pro začátek do něj napsat objekt, ve kterém budou naše reakce:

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

A níže začneme psát samotnou funkci, do které budeme předávat slice product:

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

Nyní ve složených závorkách napišme tělo funkce UserReactions. K tomu projdeme pomocí map dvojice klíč-hodnota našeho reactionObj, pro každou získáme označení pro tlačítko ('+', '+/-' nebo '-') a číselnou hodnotu té které reakce (tu budeme číst z product ve store podle názvu reakce):

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 poté na konci kódu funkce vrátíme značkování s tlačítky userReactions:

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

A také přidáme ještě trochu stylů do index.css:

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

Pokud to vypadá trochu matoucí, nebojte se, dále vám bude vše mnohem srozumitelnější.