Изпращане на 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 ... ) нека напишем:

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.