Odosielanie action v Redux aplikácii

Teraz máme reducer pre aktualizáciu slice s reakciami. Teraz potrebujeme pridať odosielanie action, ktorá bude spustená pri kliknutí používateľa na tlačidlo s reakciou. Ale predtým, aby všetko fungovalo úplne, musíme vykonať niekoľko zmien.

Otvorme našu aplikáciu s produktami, a v nej súbor productsSlice.js. Pozrite sa na definíciu initialState. Vidíte? V objektoch nie je vlastnosť s reakciami. Napravme to, nastavením počítadiel každej z reakcií na 0:

products/productsSlice.js{
  id: '1',
  title: 'Product1',
  desc: 'This is an amazing product',
  price: '300',
  amount: '30',
  reactions: {
    good: 0,
    soso: 0,
    bad: 0,
  },
},

Do druhého objektu pre inicializáciu pridajte vlastnosť reactions sami. Túto vlastnosť potrebujeme pridať nižšie do kódu pre reducer productAdded, aby aj v nových produktoch bol takýto funkcionalita. Urobme to pre jeho metódu prepare:

products/productsSlice.jsprepare(title, desc, price, amount, sellerId) {
  return {
    payload: {
      id: nanoid(),
      title,
      desc,
      price,
      amount,
      seller: sellerId,
      reactions: {
        good: 0,
        soso: 0,
        bad: 0,
      },
    },
  }
},

Teraz pristúpme k odosielaniu action. Otvorme súbor UserReactions.jsx, potom importujme do neho hook useDispatch a reactionClicked:

products/UserReactions.jsximport { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

Na začiatku kódu v tele funkcie UserReactions prvým riadkom (pred const userReactions ...) napíšme:

products/UserReactions.jsxconst dispatch = useDispatch()

A nastavme na tlačidlo reakcie odoslanie reactionClicked pri kliknutí, pričom nám bude odovzdaný id produktu a názov reakcie, na ktorú sa kliklo:

products/UserReactions.jsx<button
  key={name}
  type="button"
  className="reaction-button"
  onClick={() =>
    dispatch(reactionClicked({ productId: product.id, reaction: name }))
  }
>
  {image} {product.reactions[name]}
</button>

Zostáva nám teraz zobraziť komponent s reakciami v renderovaní pre naše stránky. Urobme to v súbore ProductsList.jsx pred elementom Link:

products/ProductsList.jsx<UserReactions product={product} />

A presne takisto pred elementom Link na stránke produktu v súbore ProductPage.jsx:

products/ProductPage.jsx<UserReactions product={product} />

Teraz, keď všetko zapadlo na svoje miesto, môžeme spustiť našu aplikáciu. Skúsme klikať na tlačidlá s reakciami. Môžeme pridať nový produkt a tiež na ne klikať. Teraz, nech klikneme kdekoľvek na tlačidlá s reakciami, zmenené hodnoty sa budú zobrazovať pre daný produkt na všetkých stránkach. Pozrite si stránku jednotlivého produktu (na ktorej ste klikali na reakcie) a stránku s ich zoznamom a naopak, pre všetky stránky bude počet reakcií pre konkrétny produkt rovnaký.

Táto lekcia bola záverečnou v kapitole o práci s dátami v Reduxe. Hlbšie sme pracovali s dátami v Redux store a teraz vieme, ako pridávať potrebnú funkcionalitu do aplikácie a používať dáta v React komponentoch.