Redux'ta Action Gönderme ve useDispatch Kancası

Redux uygulamasının çalışması için gerekli olan hemen hemen tüm bileşenleri uyguladık. Geriye kalan tek şey, bir React bileşeninden action göndermeyi anlamak. Hadi başlayalım.

Ürün uygulamamızı açın. <NewProductForm bileşeninin formunda, yeni bir ürünün verilerini kaydetmek için bir butonumuz var. Hadi ona bir tıklama işleyicisi ekleyelim. Üzerine tıklandığında, <onSaveProductClick işleyicisinin tetiklenmesini sağlayalım:

<button type="button" onClick={onSaveProductClick}>
	kaydet
</button>

Yeni bir ürün oluştururken, onun için yeni bir id'ye ihtiyacımız olacak. Bunu, herkesin bildiği nanoid kütüphanesini kullanarak oluşturacağız. Bu arada, nanoid'i kurmanıza gerek yok çünkü zaten RTK paketiyle birlikte geliyor. Nanoid'i içe aktaralım:

import { nanoid } from '@reduxjs/toolkit'

Ayrıca biliyoruz ki state'i değiştirmenin tek yolu, store'da bulunan <dispatch metodunu çağırmak ve bir action nesnesi iletmektir. Bu metoda ulaşmak için, React-Redux kancası <useDispatch'ı kullanacağız. Hadi onu da içe aktaralım:

import { useDispatch } from 'react-redux'

<NewProductForm fonksiyonunun kodunda, yerel state'lerimiz için sabitleri tanımladıktan hemen sonra, onun için bir <dispatch sabiti tanımlayalım:

const dispatch = useDispatch()

Ayrıca, önceki derste elde ettiğimiz action creator'ı <productAdded'ı içe aktarmamız gerekiyor:

import { productAdded } from './productsSlice'

Şimdi <onSaveProductClick işleyici fonksiyonunu yazabiliriz. Bunu <return komutundan önce yapalım:

const onSaveProductClick = () => {}

Fonksiyonun içinde <dispatch'i çağırıyoruz, bir action nesnesi oluşturuyoruz, <payload özelliğine oluşturulan id, isim, açıklama, fiyat ve ürün miktarını koyuyoruz. Tüm bu verileri yerel state'lerden alıyoruz. Aynı zamanda, başlangıçta tüm alanların dolu olup olmadığını bir koşulda kontrol ediyoruz - sadece bu durumda <dispatch'i çağırıyoruz. Fonksiyon kodunun sonunda, yerel state'leri başlangıç durumuna döndürüyoruz:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

		setName('')
		setDesc('')
		setPrice(0)
		setAmount(0)
	}
}

Şimdi uygulamamızı çalıştıralım, form alanlarına veri girelim ve kaydet butonuna basalım. Yaşasın, sayfanın altında yeni bir ürün belirdi. Redux DevTools'u açıp, içindeki Inspector sekmesine gidersek, solda @@INIT'in yanında bizim <products/productAdded action'ımızın da eklendiğini görüyoruz. Sağ tarafta Action ve State sekmelerine tıklayarak @@INIT ve <products/productAdded arasında geçiş yapabiliriz. Artık yeni ürünümüzün eklendiğini görüyoruz. Ayrıca Action sekmesinde, <createSlice kullanılarak otomatik olarak oluşturulan action'ı görüyoruz (örneğin, Raw'a tıklayın). Yaşasın: onu elle yazmak zorunda kalmadık.

Öğrenci uygulamanızı açın, ardından <NewStudentForm.jsx dosyasını açın, kaydetme butonuna bir tıklama işleyicisi ekleyin.

Gerekli tüm içe aktarımları yazın ve derste gösterildiği gibi <dispatch metodunu uygulayarak <onSaveStudentClick işleyici fonksiyonunu yazın.

Uygulamayı çalıştırın, form alanlarına veri girin ve kaydet butonuna tıklayın. Sayfanın altına yeni bir öğrencinin eklendiğinden emin olun.

Redux DevTools'u açın ve Action ve State sekmeleri arasında gezinin, yeni öğrenci nesnesinin eklendiğinden emin olun. Oluşturulan action nesnesine bakın, bu görevin yanıtında onu gönderin.