Redux'te Bileşende Thunk Çalışmasının Sonuçlarını Görüntüleme

Önceki derste, thunk addProduct kullanarak bir POST isteği gönderdik. Şimdi onun çalışma sonuçlarını bileşende görüntüleyelim.

Ürün uygulamamızı açalım ve içinde NewProductForm.jsx dosyasını açalım, çünkü bu bileşen yeni ürün eklemekten sorumludur. İçe aktarma satırlarına bakalım. productAdded aksiyonunun içe aktarımını, thunk addProduct'ın içe aktarımıyla değiştirelim:

import { addProduct } from './productsSlice'

Şimdi, slice'ta 'pending' istek durumunu takip etmediğimiz için, kullanıcının ürünü kaydetme düğmesine yalnızca bir kez tıklayabilmesini sağlayalım, çünkü aynı yinelenen isteklere ihtiyacımız yok. Bunun için bir yerel state daha oluşturalım:

const [requestStatus, setRequestStatus] = useState('idle')

Sonra, işleyicilerden sonra ve onSaveProductClick fonksiyonundan önce, formdaki tüm alanların doldurulup doldurulmadığını ve istek durumunun 'idle' olup olmadığını kontrol edeceğimiz kodu yazalım:

const canBeSaved =
	[name, desc, price, amount, sellerId].every(Boolean) &&
	requestStatus === 'idle'

Ardından onSaveProductClick için kodu değiştireceğiz. Öncelikle bu bir asenkron fonksiyon olacak ve yukarıdaki koşul doğruysa çalıştırılacak:

const onSaveProductClick = async () => {
	if (canBeSaved) {}
}

Slice'ta 'rejected' durumunu takip etmememize rağmen, konsola bir hata yazdırabiliriz, bunun için try-catch yapısını kullanacağız. Ayrıca buraya, istek tamamlandıktan sonra yerel state'i tekrar 'idle' olarak ayarlamak için bir finally bloğu da ekleyeceğiz:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('save product error: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

catch ve finally bloklarıyla işimiz bitti, hadi try bloğu için kodu yazalım. Burada, thunk'ın çalışması sonucunda bize bir yanıt dönene kadar yerel durumu 'in progress' olarak ayarlayacağız, ardından thunk addProduct'ı göndereceğiz. Yanıtın türüne bağlı olarak try-catch yapısını kullanmamıza RTK'nın döndürülen promise'e eklediği unwrap fonksiyonu yardımcı olacaktır. Ardından, istek başarılı olursa yerel state'leri başlangıç durumlarına ayarlarız. onSaveProductClick için tam kod şöyle görünecektir:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
			setRequestStatus('in progress')
			await dispatch(
				addProduct({ name, desc, price, amount, seller: sellerId })).unwrap()
			setName('')
			setDesc('')
			setPrice(0)
			setAmount(0)
			setSellerId('')
		} catch (err) {
			console.error('save product error: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Uygulamamızı çalıştıralım ve yeni bir ürün eklemeyi deneyelim. Gördüğünüz gibi, başarılı bir istek durumunda alanlar temizleniyor ve yeni ürün ürün listesine ekleniyor. Ayrıca tarayıcıda Redux DevTools'u açın ve sekmeleri arasında gezinin, aksiyonlara ve state'inizin nasıl değiştiğine bakın.

Öğrenci uygulamanızı açın. İçinde NewStudentForm.jsx dosyasını açın. Bir requestStatus yerel state'i daha ekleyin ve başlangıçta 'idle' olarak ayarlayın. Ders materyallerini inceleyerek, yeni öğrenci verilerini kaydetme düğmesinin, requestStatus'un değerine ve alanların dolu olup olmamasına bağlı olarak çalışıp/çalışmayacağını belirleyen bir canBeSaved değişkeni tanımlayın.

onSaveStudentClick için, duruma göre requestStatus değerini değiştirecek, yeni öğrencinin verileriyle addProduct thunk'ını gönderecek, başarılı bir istek durumunda alanları temizleyecek ve başarısızlık durumunda konsola hata yazdıracak asenkron kodu yazın. Bunun için derste gösterildiği gibi try-catch yapısını ve RTK'nın unwrap fonksiyonunu kullanın.

Uygulamanızı çalıştırın, yeni bir öğrenci ekleyin ve her şeyin çalıştığından emin olun.