Action küldése Redux alkalmazásban

Most már van egy reducerünk a reakciók slice frissítéséhez. Most hozzá kell adnunk egy action küldést, amely akkor aktiválódik, amikor a felhasználó a reakció gombra kattint. De először, hogy minden teljesen működjön, néhány módosítást kell eszközölnünk.

Nyissuk meg a termék alkalmazásunkat, és benne a productsSlice.js fájlt. Nézzük meg a initialState definícióját. Látjátok? Az objektumokban nincs reakciók tulajdonság. Javítsuk ezt meg úgy, hogy minden reakció számlálóját 0-ra állítjuk:

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

A második inicializáló objektumhoz adjátok hozzá magatok a reactions tulajdonságot. Ezt a tulajdonságot alulra is hozzá kell adnunk a productAdded reducer kódjához, hogy az új termékekben is legyen ilyen funkcionalitás. Tegyük ezt meg a prepare metódusánál:

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,
      },
    },
  }
},

Most pedig folytassuk az action küldéssel. Nyissuk meg a UserReactions.jsx fájlt, majd importáljunk bele a useDispatch hookot és a reactionClicked-t:

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

A kód elején, a UserReactions függvény testében az első sorban (a const userReactions ... elé) írjunk:

products/UserReactions.jsxconst dispatch = useDispatch()

És a reakció gombra tegyünk egy reactionClicked küldést kattintáskor, miközben átadjuk a termék id-ját és annak a reakciónak a nevét, amire kattintottak:

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

Már csak az maradt, hogy a reakciók komponensét megjelenítsük a lapjainkhoz. Tegyük ezt meg a ProductsList.jsx fájlban a Link elem elött:

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

És pontosan ugyanígy a Link elem elött a termék oldalon a ProductPage.jsx fájlban:

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

Most, hogy minden a helyére került, indíthatjuk az alkalmazásunkat. Próbáljunk meg rákattintani a reakció gombokra. Adhatunk hozzá új terméket és szintén megnyomogathatjuk őket. Most, bárhol kattintunk a reakció gombokra, a módosított értékek meg fognak jelenni az adott termékhez minden oldalon. Nézzétek meg az egyes termék oldalt (ahol a reakciókat kattintgattátok) és a listájukat és fordítva, minden oldalon a reakciók száma az adott termékhez ugyanannyi lesz.

Ez a lecke záró volt az adatok kezelésével kapcsolatos fejezetben a Redux-ban. Mélyebben dolgoztunk az adatokkal a Redux store-ban és most már tudjuk, hogyan adjuk hozzá a szükséges funkcionalitást az alkalmazáshoz és hogyan használjuk az adatokat a React komponensekben.