action-ის გაგზავნა Redux აპლიკაციაში

ახლა ჩვენ გვაქვს რედიუსერი, რომელიც ახლდება რეაქციების სლაისს. ახლა ჩვენ უნდა დავამატოთ action-ის გაგზავნა, რომელიც მოქმედებს მაშინ, როდესაც მომხმარებელი დააწკაპუნებს რეაქციის ღილაკზე. მაგრამ სანამ ეს სრულად იმუშავებს, ჩვენ გვჭირდება რამდენიმე ცვლილების შეტანა.

გავხსნათ ჩვენი პროდუქტების აპლიკაცია, და მასში ფაილი productsSlice.js. შეხედეთ initialState-ის განსაზღვრებას. ხედავთ? ობიექტებში არ არის რეაქციების თვისება. მოდით, ეს გამოვასწოროთ, თითოეული რეაქციის counter-ების მნიშვნელობის 0-ზე დაყენებით:

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

მეორე ობიექტში ინიციალიზაციისთვის თვისება reactions თავად დაამატეთ. ეს თვისება ასევე საჭიროა ქვემოთ რედიუსერის productAdded კოდში დავამატოთ, რათა ახალ პროდუქტებშიც ეს ფუნქციონალი იყოს. მოდით, ეს გავაკეთოთ მისი მეთოდის prepare-ისთვის:

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

ახლა მოდით გადავიდეთ action-ის გაგზავნაზე. გავხსნათ ფაილი UserReactions.jsx, შემდეგ იმპორტირება შევიტანოთ მასში hook useDispatch და reactionClicked:

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

კოდის დასაწყისში ფუნქციის UserReactions სხეულში პირველი ხაზი (const userReactions ... -მდე) დავწეროთ:

const dispatch = useDispatch()

და რეაქციის ღილაკზე დავამატოთ reactionClicked-ის გაგზავნა დაწკაპუნებისას, ამ შემთხვევაში გადაეცემა პროდუქტის id და რეაქციის სახელი, რომელზეც დაწკაპუნებულ იქნა:

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

ახლა ჩვენ გვრჩება კომპონენტის რეაქციებით ჩვენი გვერდების ვერსტკაში გამოტანა. გავაკეთოთ ეს ფაილში ProductsList.jsx ელემენტის Link-მდე:

<UserReactions product={product} />

და ზუსტად ანალოგიურად ელემენტის Link-მდე პროდუქტის გვერდზე ფაილში ProductPage.jsx:

<UserReactions product={product} />

ახლა, როდესაც ყველაფერი თავის ადგილზე დადგა, ჩვენ შეგვიძლია გავუშვათ ჩვენი აპლიკაცია. ვცადოთ რეაქციების ღილაკებზე დაწკაპუნება. შეგვიძლია დავამატოთ ახალი პროდუქტი და ასევე დავაწკაპუნოთ მათზე. ახლა, სადაც არ უნდა დავაწკაპუნოთ რეაქციების ღილაკებს, შეცვლილი მნიშვნელობები გამოჩნდება ამ პროდუქტისთვის ყველა გვერდზე. შეხედეთ ცალკე პროდუქტის გვერდს (სადაც თქვენ დაწკაპუნებთ რეაქციებზე) და გვერდს მათი სიით და პირიქით, ყველა გვერდისთვის რეაქციების რაოდენობა კონკრეტული პროდუქტისთვის იგივე იქნება.

ეს გაკვეთილი იყო დასკვნითი მონაცემებთან მუშაობის თავში Redux-ში. ჩვენ უფრო ღრმად ვიმუშავეთ მონაცემებთან Redux store-ში და ახლა ვიცით, როგორ დავამატოთ საჭირო ფუნქციონალი აპლიკაციაში და გამოვიყენოთ მონაცემები React კომპონენტებში.

გახსენით თქვენი აპლიკაცია სტუდენტებთან. ფაილში studensSlice.js ობიექტებს ინიციალიზაციისთვის დაამატეთ თვისება votes შესაბამისი ველებით. გააკეთეთ ეს ასევე რედიუსერისთვის studentAdded.

ფუნქციის UserVotes შიგნით ფაილში UserVotes.jsx განახორციელეთ dispatch hook-ისთვის useDispatch და გააგზავნეთ action voteClicked დაწკაპუნებისას ხმის მიცემის ღილაკებზე, გადასცეთ მას სტუდენტის id და სახელი vote, ისევე, როგორც ეს ნაჩვენები იყო გაკვეთილზე.

გამოიტანეთ ხმის მიცემის ღილაკები ვერსტკაში კომპონენტებისთვის StudentsList და StudentPage.