Slanje akcije u Redux aplikaciji

Sada imamo reduktor za ažuriranje slice-a sa reakcijama. Trenutno nam je potrebno dodati slanje akcije, koja će se okidaťi kada korisnik klikne na dugme reakcije. Ali pre toga, da bi sve u potpunosti radilo, moramo uneti par izmena.

Hajde da otvorimo našu aplikaciju sa proizvodima, a u njoj datoteku productsSlice.js. Pogledajte definiciju initialState. Vidite? U objektima ne postoji svojstvo sa reakcijama. Hajde da to ispravimo, postavljajući brojače svake od reakcija na 0:

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

U drugi objekat za inicijalizaciju dodajte svojstvo reactions sami. Ovo svojsto nam je takođe potrebno dodati ispod u kod za reduktor productAdded, kako bi i u novim proizvodima takođe postojala ova funkcionalnost. Hajde da to uradimo za njegov metod prepare:

prepare(title, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			title,
			desc,
			price,
			amount,
			seller: sellerId,
			reactions: {
				good: 0,
				soso: 0,
				bad: 0,
			},
		},
	}
},

Sada pristupimo slanju akcije. Otvorimo datoteku UserReactions.jsx, zatim importujmo u njega hook useDispatch i reactionClicked:

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

Na početku koda u telu funkcije UserReactions prvom linijom (pre const userReactions ... ) napišimo:

const dispatch = useDispatch()

I dodajmo na dugme reakcije slanje reactionClicked pri kliku, pritom će se prosleđivati id proizvoda i naziv reakcije, na koju je kliknuto:

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

Sada nam ostaje da prikažemo komponent sa reakcijama u markup-u za naše stranice. Uradimo to u datoteci ProductsList.jsx pre elementa Link:

<UserReactions product={product} />

I potpuno isto pre elementa Link na stranici proizvoda u datoteci ProductPage.jsx:

<UserReactions product={product} />

Sada, kada je sve došlo na svoje mesto, možemo pokrenuti našu aplikaciju. Probajmo da klikćemo na dugmad sa reakcijama. Možemo dodati novi proizvod i takođe pritisnuti na njih. Sada, gde god da kliknemo na dugme sa reakcijama, izmenjene vrednosti će biti prikazane za dati proizvod na svim stranicama. Pogledajte stranicu pojedinačnog proizvoda (na kojoj ste kliktali na reakcije) i stranicu sa njihovim spiskom i obrnuto, za sve stranice broj reakcija za konkretan proizvod će biti isti.

Ova lekcija je bila poslednja u poglavlju o radu sa podacima u Redux-u. Dubinski smo poradili sa podacima u Redux store-u i sada znamo, kako dodati potrebnu funkcionalnost u aplikaciju i koristiti podatke u React komponentama.

Otvorite vašu aplikaciju sa studentima. U datoteci studensSlice.js objektima za inijalizaciju dodajte svojstvo votes sa odgovarajućim poljima. Uradite ovo i za reduktor studentAdded.

Unutar funkcije UserVotes u datoteci UserVotes.jsx napravite dispatch za hook useDispatch i uradite slanje akcije voteClicked pri kliku na dugmad glasanja, prosledite mu id studenta i naziv vote, poput kako je pokazano u lekciji.

Prikažite dugmad za glasanje u markup-u za komponente StudentsList i StudentPage.