Испраќање на action во Redux апликација

Сега имаме reducer за ажурирање на slice-от со реакции. Во моментов ни е потребно да додадеме испраќање на 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.