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:

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

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

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

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

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

<UserReactions product={product} />

A presne takisto pred elementom Link na stránke produktu v súbore 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.

Otvorte vašu aplikáciu so študentmi. V súbore studensSlice.js objektom pre inicializáciu pridajte vlastnosť votes s príslušnými poliami. Urobte to aj pre reducer studentAdded.

Vnútri funkcie UserVotes v súbore UserVotes.jsx vytvorte dispatch pre hook useDispatch a vykonajte odoslanie action voteClicked pri kliknutí na tlačidlá hlasovania, odovzdajte mu id študenta a názov vote, podobne ako je to ukázané v lekcii.

Zobrazte tlačidlá pre hlasovanie v renderovaní pre komponenty StudentsList a StudentPage.