Адпраўка action у Redux дадатку

Цяпер у нас ёсць рэдьюсер для абнаўлення слайса з рэакцыямі. Зараз нам неабходна дадаць адпраўку 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 ... ) пропiшем:

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 для хука useDispatch і зрабіце адпраўку экшэна voteClicked па кліку на кнопкі галасавання, перадайце яму id студэнта і назву vote, падобна да таго, як паказана ў уроку.

Вывядзіце кнопачкі для галасавання ў верстцы для кампанентаў StudentsList і StudentPage.