További logika hozzáadása a Redux alkalmazáshoz

Ezen az órán adjuk hozzá az utolsó komponenst az alkalmazásunkhoz. Hogy pontosak legyünk, a termékhez hozzáadjuk a felhasználó reakcióját, aki vagy megrendelte, vagy információt olvasott róla.

Nyissuk meg a termékalkalmazásunkat. Ahogyan az eladó nevével is történt, szükségünk van a felhasználók reakciójának megjelenítésére az alkalmazás több helyén is. Ez azt jelenti, hogy külön komponensre lesz szükségünk. Ezért kezdjük azzal, hogy a products mappában létrehozunk egy UserReactions.jsx fájlt. Kezdjük azzal, hogy definiálunk benne egy objektumot, amelyben a reakcióink lesznek:

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

Alább kezdjük el magának a függvénynek az írását, amibe átadjuk a product slice-ot:

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

Most írjuk be a kapcsos zárójelek közé a UserReactions függvény törzsét. Ehhez iteráljunk végig a reactionObj kulcs-érték párijain a map segítségével, minden egyes párhoz kapjunk egy gombjelölést ('+', '+/-' vagy '-') és az adott reakció számértékét (ezt a product store-ból fogjuk kinyerni a reakció neve alapján):

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

Majd ezután a függvény kódjának a végén adjuk vissza a userReactions gombokkal ellátott JSX-et:

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

És adjunk hozzá még néhány stílust a index.css fájlhoz:

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

Ha ez kissé bonyolultnak tűnik, ne aggódj, később sokkal világosabb lesz számodra.