Redux колдонмосуна action жиберүү

Азыр бизде реакциялар слайсын жаңыртуу үчүн редьюсер бар. Азыр бизге колдонуучу реакция баскычына чыкылдаганда ишке кирген 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 редьюсеринин кодуна да кошуу керек, жаңы продукттарда да ушул функционал болушу үчүн. Келгиле, муны анын 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 хугун жана 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.jsx файлындагы UserVotes функциясынын ичинде useDispatch хугү үчүн dispatch аныктап, сабакта көрсөтүлгөндөй эле, добуш берүү баскычтарына чыкылдоодо voteClicked экшенун жиберүүнү жасаңыз, ага студенттин idсин жана vote атын өткөрүп бериңиз.

Добуш берүү баскычтарын StudentsList жана StudentPage компоненттеринин версткасына чыгарыңыз.