Kutuma Action katika Programu ya Redux

Sasa tuna reducer ya kusasisha kipande cha mwitikio. Kwa sasa tunahitaji kuongeza kutuma action, ambayo itatokea wakati mtumiaji anapobofya kifungo cha mwitikio. Lakini kabla ya hayo, ili yote ifanye kazi kikamilifu, tunahitaji kufanya mabadiliko kadhaa.

Wacha tufungue programu yetu ya bidhaa, na ndani yake faili productsSlice.js. Angalia ufafanuzi wa initialState. Unaona? Katika vitu hakuna sifa ya miwitikio. Wacha tuirekebishe, tukiweka kichupo cha kila moja ya miwitikio kuwa 0:

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

Katika kitu cha pili cha uanzishaji ongeza sifa reactions wewe mwenyewe. Sifa hii inahitajika kuongezwa chini katika msimbo wa reducer productAdded, ili bidhaa mpya pia ziwe na utendakazi huu. Wacha tufanye hivyo kwa njia yake prepare:

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

Sasa tuanze kutuma action. Wacha tufungue faili UserReactions.jsx, kisha tuingize ndani yake kuingiza useDispatch na reactionClicked:

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

Mwanzoni mwa msimbo kwenye mwili wa chaguo za kukokotoa UserReactions mstari wa kwanza (kabla ya const userReactions ... ) tuandike:

const dispatch = useDispatch()

Na tuweke kwenye kifungo cha mwitikio kutuma reactionClicked wakati wa kubofya, wakati huo huo kutapelekwa kitambulisho cha bidhaa na jina la mwitikio, ambayo ilibofywa:

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

Imebaki kwetu sasa kuonyesha sehemu ya miwitikio kwenye muundo wa kurasa zetu. Wacha tufanye hivyo kwenye faili ProductsList.jsx kabla ya kipengele Link:

<UserReactions product={product} />

Na vivyo hivyo kabla ya kipengele Link kwenye ukurasa wa bidhaa kwenye faili ProductPage.jsx:

<UserReactions product={product} />

Sasa, wakati kila kitu kimesimama mahali pake, tunaweza kuzindua programu yetu. Wacha tujaribu kubofya vibonye vya miwitikio. Tunaweza kuongeza bidhaa mpya na pia kubofya kwao. Sasa, popote tulipobofya kwenye vifungo vya miwitikio, thamani zilizobadilishwa zitaonyeshwa kwa bidhaa hii kwenye kurasa zote. Angalia ukurasa wa bidhaa ya pekee (ambayo ulibofya kwenye miwitikio) na ukurasa wa orodha yao na kinyume chake, kwa kurasa zote idadi ya miwitikio kwa bidhaa maalum itakuwa sawa.

Somo hili lilikuwa la kumalizia katika sura ya kufanya kazi na data katika Redux. Tumefanya kazi kwa kina zaidi na data katika kuhifadhi duka la Redux na sasa tunajua, jinsi ya kuongeza utendakazi unaohitajika katika programu na kutumia data katika sehemu za React.

Fungua programu yako ya wanafunzi. Kwenye faili studensSlice.js vitu vya uanzishaji ongeza sifa votes na sehemu zinazofanana. Fanya hii na kwa reducer studentAdded.

Ndani ya chaguo za kukokotoa UserVotes kwenye faili UserVotes.jsx weka dispatch kwa kuingiza useDispatch na fanya kutuma kitendo voteClicked kwa kubofya kwenye vibonye vya kupigia kura, wasilisha kwake kitambulisho cha mwanafunzi na jina la vote, kufanana na vile inavyoonyeshwa kwenye somo.

Onyesha vibonye vya kupigia kura kwenye muundo wa sehemu za StudentsList na StudentPage.