Redux tətbiqində action göndərilməsi

İndi bizdə reaksiyalar slice-nı yeniləmək üçün reducer var. Hal-hazırda bizə istifadəçinin reaksiya düyməsinə kliklədiyi zaman işə düşəcək action göndərilməsini əlavə etmək lazımdır. Amma əvvəlcə, hər şeyin tam işləməsi üçün bir neçə dəyişiklik etməliyik.

Gəlin məhsullarla olan tətbiqimizi açaq, onun içində isə productsSlice.js faylına baxaq. initialState tərifinə nəzər salın. Görürsünüz? Obyektlərdə reaksiyalar xassəsi yoxdur. Gəlin bunu hər bir reaksiyanın sayğacını 0 təyin edərək düzəldək:

{
	id: '1',
	title: 'Product1',
	desc: 'This is an amazing product',
	price: '300',
	amount: '30',
	reactions: {
		good: 0,
		soso: 0,
		bad: 0,
	},
},

İkinci işəsalma obyektinə reactions xassəsini özünüz əlavə edin. Bu xassəni aşağıda productAdded reducer-inin kodunda da əlavə etməliyik ki, yeni məhsullarda da bu funksionallıq olsun. Gəlin bunu onun prepare metodu üçün edək:

prepare(title, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			title,
			desc,
			price,
			amount,
			seller: sellerId,
			reactions: {
				good: 0,
				soso: 0,
				bad: 0,
			},
		},
	}
},

İndi isə action göndərilməsinə keçək. UserReactions.jsx faylını açaq, sonra onun içərisinə useDispatch hook-unu və reactionClicked import edək:

import { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

Kodun əvvəlində, UserReactions funksiyasının badəsində birinci sətirdə (const userReactions ... -dən əvvəl) yazaq:

const dispatch = useDispatch()

Və reaksiya düyməsinə kliklədikdə reactionClicked-in göndərilməsini əlavə edək, bu zaman bizə məhsulun id-si və kliklənən reaksiyanın adı ötürüləcək:

<button
	key={name}
	type="button"
	className="reaction-button"
	onClick={() =>
		dispatch(reactionClicked({ productId: product.id, reaction: name }))
	}
>
	{image} {product.reactions[name]}
</button>

İndi bizə reaksiyalar komponentini səhifələrimizin verstkasında göstərmək qalır. Bunu ProductsList.jsx faylında Link elementindən əvvəl edək:

<UserReactions product={product} />

Və eyni şəkildə, məhsul səhifəsində Link elementindən əvvəl ProductPage.jsx faylında:

<UserReactions product={product} />

İndi, hər şöz öz yerinə düşdükdə, biz tətbiqimizi işə sala bilərik. Gəlin reaksiya düymələrinə klikləməyə çalışaq. Yeni məhsul əlavə edib onların üzərində də basmağı sınaya bilərik. İndi, reaksiya düymələrinə hardan klikləsək də, dəyişdirilmiş dəyərlər bu məhsul üçün bütün səhifələrdə göstəriləcək. Ayrı-ayrı məhsul səhifəsinə (reaksiyalara kliklədiyiniz səhifə) və onların siyahısı olan səhifəyə baxın və əksinə, bütün səhifələr üçün konkret məhsulun reaksiya sayları eyni olacaq.

Bu dərs Redux-da məlumatlarla işləmə bölməsi üçün yekunlaşdırıcı idi. Biz Redux store-dakı məlumatlarla daha dərindən işlədik və indi bilirik ki, tətbiqə lazımi funksionallığı necə əlavə etmək və məlumatları React komponentlərində necə istifadə etmək olar.

Tələbələrlə olan tətbiqinizi açın. studensSlice.js faylında işəsalma obyektlərinə müvafiq sahələrlə votes xassəsini əlavə edin. Bunu studentAdded reducer-i üçün də edin.

UserVotes.jsx faylında UserVotes funksiyasının daxilində useDispatch hook-u üçün dispatch təyin edin və səsvermə düymələrinə kliklədikdə voteClicked action-unun göndərilməsini edin, ona dərsdə göstərildiyi kimi tələbənin id-sini və vote adını ötürün.

Səsvermə düymələrini StudentsList və StudentPage komponentləri üçün verstkada çıxarın.