Dërgimi i action në aplikacionin Redux

Tani kemi reducer për përditësimin e slice-it me reaksione. Tani na duhet të shtojmë dërgimin e action, e cila do të aktivizohet kur përdoruesi klikon në butonin me reaksion. Por së pari, në mënyrë që gjithçka të funksionojë plotësisht, duhet të bëjmë disa ndryshime.

Le të hapim aplikacionin tonë me produktet, dhe në të file-in productsSlice.js. Shikoni përcaktimin initialState. E shihni? Në objektet nuk ka pronë me reaksione. Le ta rregullojmë këtë, duke vendosur numëruesit e secilit prej reaksioneve në 0:

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

Në objektin e dytë për inicializim shtoni vetë pronën reactions. Kjo pronë na duhet gjithashtu të shtohet më poshtë në kod për reducer-in productAdded, në mënyrë që edhe në produktet e reja të ketë një funksionalitet të tillë. Le ta bëjmë këtë për metodën e tij prepare:

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

Tani le të fillojmë me dërgimin e action. Le të hapim file-in UserReactions.jsx, pastaj të importojmë në të hook-un useDispatch dhe reactionClicked:

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

Në fillim të kodit në trupin e funksionit UserReactions rreshtin e parë (para const userReactions ... ) le të shkruajmë:

const dispatch = useDispatch()

Dhe le t'i vendosim butonit të reaksionit dërgimin e reactionClicked në klik, ku do të transmetohet id e produktit dhe emri i reaksionit në të cilin u klikua:

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

Na mbetet tani të shfaqim komponentin me reaksione në shënjestër për faqet tona. Le ta bëjmë këtë në file-in ProductsList.jsx përpara elementit Link:

<UserReactions product={product} />

Dhe në të njëjtën mënyrë përpara elementit Link në faqen e produktit në file-in ProductPage.jsx:

<UserReactions product={product} />

Tani, kur gjithçka është vendosur në vendin e duhur, ne mund të nisim aplikacionin tonë. Le të provojmë të klikojmë në butonat me reaksione. Mundemi të shtojmë një produkt të ri dhe gjithashtu të shtypim mbi to. Tani, kudo që të klikojmë në butonat me reaksione, vlerat e modifikuara do të shfaqen për këtë produkt në të gjitha faqet. Shikoni faqen e produktit individual (në të cilën keni klikuar në reaksione) dhe faqen me listën e tyre dhe anasjelltas, për të gjitha faqet numri i reaksioneve për një produkt të caktuar do të jetë i njëjtë.

Ky mësim ishte përfundimtar në kapitullin për punën me të dhënat në Redux. Ne kemi punuar më thellë me të dhënat në Redux store dhe tani e dimë, si të shtojmë funksionalitetin e nevojshëm në aplikacion dhe të përdorim të dhënat në React komponentët.

Hapni aplikacionin tuaj me studentët. Në file-in studensSlice.js objekteve për inicializim shtoni pronën votes me fushat përkatëse. Bëni këtë edhe për reducer-in studentAdded.

Brenda funksionit UserVotes në file-in UserVotes.jsx krijoni dispatch për hook-un useDispatch dhe bëni dërgimin e action-it voteClicked me klikim në butonat e votimit, transmetoji atij id e studentit dhe emrin vote, në mënyrë të ngjashme me atë siç tregohet në mësim.

Shfaqni butonat për votim në shënjestër për komponentët StudentsList dhe StudentPage.