Pošiljanje action v Redux aplikaciji

Zdaj imamo reducer za posodobitev slice z reakcijami. Zdaj moramo dodati pošiljanje action, ki se bo sprožila ob kliku uporabnika na gumb z reakcijo. Toda prej, da bo vse v celoti delovalo, moramo narediti nekaj sprememb.

Odprimo našo aplikacijo s produkti, v njej pa datoteko productsSlice.js. Poglejte opredelitev initialState. Vidite? V objektih ni lastnosti z reakcijami. Popravimo to tako, da nastavimo števce vsake od reakcij 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,
  },
},

V drugi objekt za inicializacijo dodajte lastnost reactions sami. To lastnost moramo dodati tudi spodaj v kodo za reducer productAdded, da bodo imeli tudi novi produkti takšno funkcionalnost. Naredimo to za njegovo metodo 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,
      },
    },
  }
},

Zdaj pa pričnimo s pošiljanjem action. Odprimo datoteko UserReactions.jsx, nato uvozimo vanjo hook useDispatch in reactionClicked:

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

Na začetku kode v telesu funkcije UserReactions v prvi vrstici (pred const userReactions ...) zapišimo:

products/UserReactions.jsxconst dispatch = useDispatch()

In na gumb reakcije obesimo pošiljanje reactionClicked ob kliku, pri tem pa bomo posredovali id produkta in ime reakcije, na katero so kliknili:

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

Zdaj nam je ostalo še, da prikažemo komponento z reakcijami v razporeditvi za naše strani. Naredimo to v datoteki ProductsList.jsx pred elementom Link:

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

In povsem enako pred elementom Link na strani produkta v datoteki ProductPage.jsx:

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

Zdaj, ko je vse na svojem mestu, lahko zaženemo našo aplikacijo. Poskusimo klikniti na gumbe z reakcijami. Lahko dodamo nov produkt in prav tako pritisnemo nanje. Zdaj, kjer koli kliknemo na gumbe z reakcijami, bodo spremenjene vrednosti prikazane za ta produkt na vseh straneh. Oglejte si stran posameznega produkta (na kateri ste klikali na reakcije) in stran z njihovim seznamom ter obratno, za vse strani bo število reakcij za določen produkt enako.

Ta lekcija je bila zaključna v poglavju o delu s podatki v Reduxu. Bolj poglobljeno smo delali s podatki v Redux store in zdaj vemo, kako dodati potrebno funkcionalnost v aplikacijo in uporabiti podatke v React komponentah.