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 компоненттерінің версткасына шығарыңыз.