Redux-də thunk işinin nəticələrini komponentdə göstərmək

Keçən dərsdə biz thunk addProduct köməyi ilə POST sorğusu göndərdik. Gəlin indi onun işinin nəticələrini komponentdə göstərək.

Tətbiqimizi məhsullarla açaq və onun içində NewProductForm.jsx faylını açaq, çünki bu komponent yeni məhsul əlavə etməyə cavabdehdir. İmport sətirlərinə baxaq. productAdded eksheninin importunu addProduct thunk-ının importu ilə əvəz edək:

import { addProduct } from './productsSlice'

İndi isə, çünki biz slice-də 'pending' sorğu statusunu izləmirik, gəlin edək ki, istifadəçi məhsulu yadda saxla düyməsinə yalnız bir dəfə basa bilsin, çünki bizə eyni təkrar sorğular lazım deyil. Bunun üçün başqa bir lokal state təyin edək:

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

Sonra, hendlerlərdən sonra və onSaveProductClick funksiyasından əvvəl, formanın bütün sahələrinin doldurulub-doldurulmadığını və sorğu statusunun 'idle' olub-olmadığını yoxlayacağımız kodu yazaq:

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

Sonra onSaveProductClick üçün kodu dəyişəcəyik. Birincisi, bu async funksiya olacaq və yuxarıdakı şərt doğru olduqda icra olunacaq:

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

Biz slice-də 'rejected' statusunu izləməsək də, konsolda xətanı göstərə bilərik, bunun üçün try-catch konstruksiyasından istifadə edəcəyik. Həmçinin, sorğu icra olunduqdan sonra lokal state-i yenidən 'idle' vəziyyətinə qaytarmaq üçün finally də əlavə edəcəyik:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('məhsulu yadda saxla xətası: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

catch və finally blokları ilə işimizi bitirdik, gəlin indi try bloku üçün kodu yazaq. Burada biz lokal statusu thunk işinin nəticəsi kimi bir cavab qayıdana qədər 'in progress' vəziyyətinə qoyacağıq, sonra isə addProduct thunk-ımızı göndərəcəyik. Cavabın tipindən asılı olaraq try-catch konstruksiyasından istifadə etmək üçün RTK-nın qaytardığı promise-ə əlavə etdiyi unwrap funksiyası bizə kömək edəcək. Sonra, əgər sorğu uğurlu oldusa, biz lokal state-ləri ilkin vəziyyətlərinə qaytarırıq. onSaveProductClick üçün tam kod belə görünəcək:

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('məhsulu yadda saxla xətası: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Tətbiqimizi işə salaq və yeni məhsul əlavə etməyə çalışaq. Gördüyünüz kimi, uğurlu sorğu halında sahələr təmizlənir və yeni məhsul məhsul siyahısına əlavə olunur. Həmçinin brauzerdə Redux DevTools-u açın və onun vərəqləri arasında gəzin, ekshenlərə və state-inizin necə dəyişdiyinə baxın.

Tələbələr olan tətbiqinizi açın. Ondakı NewStudentForm.jsx faylını açın. Əlavə bir lokal state requestStatus əlavə edin və onun ilkin qiymətini 'idle' təyin edin. Dərsin materialları ilə tanış olaraq, canBeSaved dəyişənini təyin edin, onun köməyi ilə yeni tələbə məlumatlarını yadda saxlama düyməsi requestStatus-un qiymətindən və sahələrin doldurulmasından asılı olaraq işləyəcək/işləməyəcək.

onSaveStudentClick üçün async kod yazın, hansı ki, vəziyyətdən asılı olaraq requestStatus-un qiymətini dəyişəcək, yeni tələbənin məlumatları ilə addProduct thunk-ını göndərəcək, uğurlu sorğu halında sahələri təmizləyəcək və uğursuzluq halında konsolda xətanı göstərəcək, dərsdə göstərildiyi kimi. Bunun üçün try-catch konstruksiyası və RTK-nın unwrap funksiyasından istifadə edin.

Tətbiqinizi işə salın, yeni tələbə əlavə edin və hər şeyin işlədiyinə əmin olun.