Слање 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, затим импортујмо у њега hook 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 за hook useDispatch и извршите слање action-а voteClicked при клику на дугмад за гласање, проследите му id студента и назив vote, слично као што је приказано у лекцији.

Прикажите дугмиће за гласање у верстању за компоненте StudentsList и StudentPage.