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 илова кунед. Ин хусусият барои мо зарур аст, ки дар коди reducer 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 бо майдонҳои мувофиқ илова кунед. Инро барои reducer studentAdded низ анҷом диҳед.

Дар дохили функсияи UserVotes дар файли UserVotes.jsx dispatch-ро барои хуки useDispatch муқаррар кунед ва фиристодани action-и voteClicked-ро ҳангоми клик ба тугмаҳои овоздиҳӣ анҷом диҳед, ба он id-и донишҷӯ ва номи vote-ро интиқол диҳед, ба монанди он чӣ ки дар дарс нишон дода шуд.

Тугмаҳои овоздиҳиро дар верста барои компонентҳои StudentsList ва StudentPage бароваред.