Redux ilovasida action jo‘natish

Endi bizda reaksiyalar slaysini yangilash uchun reducer mavjud. Hozir foydalanuvchi reaksiya tugmachasini bosganda ishga tushadigan action jo‘natishni qo‘shishimiz kerak. Ammo barchasi to‘liq ishlashidan oldin, biz bir nechta o‘zgartirishlar kiritishimiz kerak.

Keling, mahsulotlar ilovamizni ochaylik, va unda productsSlice.js faylini ochamiz. initialState aniqlashtirishiga qarang. Ko‘ryapsizmi? Ob'ektlarda reaksiyalar xususiyati yo‘q. Buni tuzatamiz, har bir reaksiya hisoblagichini 0 ga o‘rnatamiz:

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

Ikkinchi inicializatsiya ob'ekti uchun reactions xususiyatini o‘zingiz qo‘shing. Bu xususiyatni yangi mahsulotlarda ham bu funksionallik bo‘lishi uchun pastda productAdded reduceri kodiga qo‘shishimiz kerak. Keling, buni uning prepare metodi uchun qilamiz:

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

Endi action jo‘natishga o‘tamiz. UserReactions.jsx faylini ochamiz, keyin unda useDispatch hooki va reactionClicked ni import qilamiz:

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

Kod boshida UserReactions funksiyasi tarkibida birinchi qator sifatida (const userReactions ... dan oldin) yozamiz:

const dispatch = useDispatch()

Va reaksiya tugmachasiga bosilganda reactionClicked ni jo‘natishni o‘rnatamiz, bunda mahsulot id si va bosilgan reaksiya nomi uzatiladi:

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

Endi reaksiyalar komponentini sahifalarimiz uchun vertskada ko‘rsatish qoldi. Buni ProductsList.jsx faylida Link elementidan oldin qilamiz:

<UserReactions product={product} />

Va xuddi shunday Link elementidan oldin mahsulot sahifasida ProductPage.jsx faylida:

<UserReactions product={product} />

Endi, hammasi o‘z o‘rniga tushganida, ilovamizni ishga tushirishimiz mumkin. Keling, reaksiya tugmachalari ustida bosishni sinab ko‘ramiz. Yangi mahsulot qo‘shishimiz va ular ustida ham bosishimiz mumkin. Endi, qayerda bo‘lmasin reaksiya tugmachalari ustida bossak, o‘zgartirilgan qiymatlar ushbu mahsulot uchun barcha sahifalarda aks etadi. Alohida mahsulot sahifasiga (reaksiyalar ustida bosgan sahifangizga) va ularning ro‘yxati sahifasiga qarang va aksincha, barcha sahifalar uchun ma'lum bir mahsulotning reaksiyalar soni bir xil bo‘ladi.

Ushbu dars Redux da ma'lumotlar bilan ishlash bo‘limidagi yakuniy dars edi. Biz Redux store dagi ma'lumotlar bilan chuqurroq ishladik va endi ilovada kerakli funksionallikni qanday qo‘shish va ma'lumotlarni React komponentlarida qanday ishlatishni bilamiz.

Talabalar ilovangizni oching. studensSlice.js faylida inicializatsiya ob'ektlariga mos sohalar bilan votes xususiyatini qo‘shing. Buni studentAdded reduceri uchun ham qiling.

UserVotes.jsx faylidagi UserVotes funksiyasi ichida useDispatch hooki uchun dispatch ni belgilang va ovoz berish tugmachalari bosilganda voteClicked actionini jo‘natishni amalga oshiring, unga talaba id sini va vote nomini uzating, darsda ko‘rsatilganidek.

Ovoz berish tugmachalari vertskasini StudentsList va StudentPage komponentlari uchun ko‘rsating.