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:

{
	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:

prepare(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:

import { 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:

const 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:

<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:

<UserReactions product={product} />

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

<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.

Nyisd meg a diák alkalmazásodat. A studensSlice.js fájlban az inicializáló objektumokhoz add hozzá a votes tulajdonságot a megfelelő mezőkkel. Tedd ezt meg a studentAdded reducerhez is.

A UserVotes függvényen belül a UserVotes.jsx fájlban hozz létre egy dispatch-et a useDispatch hookhoz és készíts el egy voteClicked action küldést a szavazás gombokra kattintáskor, add át neki a diák id-ját és a vote nevét, hasonlóan ahhoz, ahogyan a leckében láttátok.

Jelenítsd meg a szavazás gombokat a StudentsList és a StudentPage komponenseknél.