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:

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

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

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

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

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

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

<UserReactions product={product} />

In povsem enako pred elementom Link na strani produkta v datoteki 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.

Odprite vašo aplikacijo s študenti. V datoteki studensSlice.js objektom za inicializacijo dodajte lastnost votes z ustreznimi polji. Naredite to tudi za reducer studentAdded.

Znotraj funkcije UserVotes v datoteki UserVotes.jsx ustvarite dispatch za hook useDispatch in naredite pošiljanje akcije voteClicked ob kliku na gumbe za glasovanje, posredujte mu id študenta in ime vote, podobno kot je prikazano v lekciji.

Prikažite gumbe za glasovanje v razporeditvi za komponente StudentsList in StudentPage.