Veiksmo (action) siuntimas Redux programoje

Dabar mes turime reducerį atnaujinimui reakcijų gabaliuko (slice). Dabar mums reikia pridėti veiksmo (action) siuntimą, kuris suveiks paspaudus vartotojo reakcijos mygtuką. Tačiau pirmiausia, kad viskas visiškai veiktų, turime atlikti keletą pakeitimų.

Atidarykime savo produktų programą, o joje failą productsSlice.js. Pažvelkite į initialState apibrėžimą. Matote? Objektuose nėra reakcijų savybės. Išspręskime tai, nustatydami kiekvienos reakcijos skaitiklius į 0:

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

Antrajam inicijavimo objektui patys pridėkite savybę reactions. Šią savybę taip pat reikia pridėti žemiau į productAdded reducerio kodą, kad ir nauji produktai turėtų šią funkciją. Padarykime tai jo prepare metodui:

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

Dabar pradėkime veiksmo (action) siuntimą. Atidarykime failą UserReactions.jsx, tada importuokime jame useDispatch hook'ą ir reactionClicked:

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

Kodo pradžioje, UserReactions funkcijos kūne, pirmoje eilutėje (prieš const userReactions ... ) parašykime:

const dispatch = useDispatch()

Ir uždėkime ant reakcijos mygtuko reactionClicked siuntimą paspaudus, tuo pačiu mums bus perduodamas produkto id ir paspaustos reakcijos pavadinimas:

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

Dabar mums belieka atvaizduoti komponentą su reakcijomis mūsų puslapių išdėstyme. Padarykime tai faile ProductsList.jsx prieš Link elementą:

<UserReactions product={product} />

Ir lygiai taip pat prieš Link elemento produkto puslapyje faile ProductPage.jsx:

<UserReactions product={product} />

Dabar, kai viskas atsidūrė savo vietose, galime paleisti savo programą. Pabandykime paspauskite ant reakcijų mygtukų. Galime pridėti naują produktą ir taip pat paspausti ant jų. Dabar, kad ir kur mes nespausdintume reakcijų mygtukų, pakeistos reikšmės bus rodomos šiam produktui visuose puslapiuose. Pažiūrėkite atskiro produkto puslapį (kuriame spausdėte reakcijas) ir puslapį su jų sąrašu ir atvirkščiai, visuose puslapiuose reakcijų skaičius konkrečiam produktui bus vienodas.

Ši pamoka buvo paskutinė duomenų darbo su Redux skyriuje. Mes išsamiau padirbome su duomenimis Redux store ir dabar žinome, kaip pridėti mums reikalingą funkcionalumą į programą ir naudoti duomenis React komponentuose.

Atidarykite savo studentų programą. Faile studensSlice.js inicializavimo objektams pridėkite savybę votes su atitinkamais laukais. Padarykite tai ir studentAdded reduceriui.

UserVotes funkcijos viduje, faile UserVotes.jsx, aprašykite dispatch useDispatch hook'ui ir atlikite veiksmo (action) voteClicked siuntimą paspaudus balsavimo mygtukus, perduokite jam studento id ir vote pavadinimą, panašiai kaip parodyta pamokoje.

Atvaizduokite balsavimo mygtukus StudentsList ir StudentPage komponentų išdėstyme.