Redux Uygulamasında Action Gönderme

Artık reaksiyonlar slice'ını güncellemek için bir reducer'ımız var. Şimdi, kullanıcının reaksiyon butonuna tıkladığında tetiklenecek bir action göndermeyi eklememiz gerekiyor. Ama öncelikle, her şeyin tamamen çalışması için birkaç değişiklik yapmamız gerekiyor.

Ürün uygulamamızı açalım ve içindeki productsSlice.js dosyasını açalım. initialState tanımına bakın. Gördünüz mü? Nesnelerde reaksiyonlar özelliği yok. Bunu düzeltelim, her bir reaksiyonun sayacını 0 olarak ayarlayalım:

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

İkinci başlatma nesnesine reactions özelliğini kendiniz ekleyin. Aynı özelliği, yeni ürünlerde de bu işlevselliğin olması için, aşağıdaki productAdded reducer'ının koduna da eklememiz gerekiyor. Bunu onun prepare metodu için yapalım:

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

Şimdi action göndermeye başlayalım. UserReactions.jsx dosyasını açalım, ardından içine useDispatch kancasını ve reactionClicked'ı içe aktaralım:

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

Kodun başında, UserReactions fonksiyonunun gövdesinde ilk satır olarak (const userReactions ... 'ten önce) yazalım:

const dispatch = useDispatch()

Ve reaksiyon butonuna tıklandığında reactionClicked'ı göndermeyi ekleyelim, bu sırada ürünün id'si ve tıklanan reaksiyonun adı iletilir:

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

Şimdi yapmamız gereken, reaksiyonları içeren bileşeni sayfalarımızın görsel tasarımında göstermek. Bunu ProductsList.jsx dosyasında Link öğesinden önce yapalım:

<UserReactions product={product} />

Ve aynı şekilde, ürün sayfasında Link öğesinden önce ProductPage.jsx dosyasında:

<UserReactions product={product} />

Şimdi her şey yerli yerine oturduğuna göre, uygulamamızı çalıştırabiliriz. Reaksiyon butonlarına tıklamayı deneyelim. Yeni bir ürün ekleyip onlara da tıklayabiliriz. Artık reaksiyon butonlarına nerede tıklarsak tıklayalım, değişen değerler o ürün için tüm sayfalarda görüntülenecek. Tıkladığınız reaksiyonların olduğu ayrı ürün sayfasına ve liste sayfasına bakın ve tam tersi, tüm sayfalarda belirli bir ürün için reaksiyon sayısı aynı olacak.

Bu ders, Redux'ta verilerle çalışma bölümünün sonuncusuydu. Redux store'daki verilerle daha derinlemesine çalıştık ve şimdi uygulamamıza ihtiyacımız olan işlevselliği nasıl ekleyeceğimizi ve verileri React bileşenlerinde nasıl kullanacağımızı biliyoruz.

Öğrenci uygulamanızı açın. studensSlice.js dosyasında, başlatma nesnelerine ilgili alanlarla birlikte votes özelliğini ekleyin. Bunu studentAdded reducer'ı için de yapın.

UserVotes.jsx dosyasındaki UserVotes fonksiyonunun içinde, useDispatch kancası için dispatch'i tanımlayın ve derste gösterildiği gibi, oylama butonlarına tıklandığında öğrenci id'sini ve vote adını ileterek voteClicked action'ını göndermeyi yapın.

Oylama butonlarını, StudentsList ve StudentPage bileşenlerinin görsel tasarımında gösterin.