Action-ի ուղարկում Redux հավելվածում

Այժմ մենք ունենք reducer, որը թարմացնում է ռեակցիաների հատվածը: Այժմ մեզ անհրաժեշտ է ավելացնել action-ի ուղարկում, որը կգործարկվի, երբ օգտատերը կտտացնի ռեակցիայի կոճակին: Սակայն նախ, որպեսզի ամեն ինչ ամբողջությամբ աշխատի, մենք պետք է կատարենք մի քանի փոփոխություն:

Եկեք բացենք մեր ապրանքների հավելվածը, իսկ դրա մեջ՝ productsSlice.js ֆայլը: Նայեք initialState-ի սահմանմանը: Տեսնում եք: Օբյեկտներում չկա ռեակցիաների հատկություն: Եկեք դա ուղղենք՝ յուրաքանչյուր ռեակցիայի հաշվիչը դնելով 0:

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

Երկրորդ օբյեկտին ինիցիալիզացիայի համար ինքնուրույն ավելացրեք reactions հատկությունը: Այս նույն հատկությունը մեզ անհրաժեշտ է ավելացնել ներքևում productAdded reducer-ի կոդում, որպեսզի նոր ապրանքներն ունենան նույն ֆունկցիոնալությունը: Եկեք դա անենք դրա 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 ֆայլը, ապա ներմուծենք դրա մեջ useDispatch hook-ը և 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 reducer-ի համար:

UserVotes ֆունկցիայի ներսում՝ UserVotes.jsx ֆայլում, սահմանեք dispatch useDispatch hook-ի համար և կատարեք voteClicked action-ի ուղարկում կտտոցի դեպքում ձայնարկության կոճակների վրա, փոխանցեք դրան ուսանողի id-ն և vote-ի անունը, ինչպես ցույց է տրված դասում:

Ցուցադրեք ձայնարկության կոճակները վերտում StudentsList և StudentPage կոմպոնենտների համար: