A thunk működésének eredményeinek megjelenítése komponensben a Redux-ban

Az előző órán elküldtünk egy POST-kérelmet a addProduct thunk segítségével. Most jelenítsük meg a működésének eredményeit a komponensben.

Nyissuk meg a termékalkalmazásunkat, és benne a NewProductForm.jsx fájlt, mivel ez a komponens felelős az új termék hozzáadásáért. Nézzük meg az import sorokat. Cseréljük le a productAdded action importját a addProduct thunk importjára:

import { addProduct } from './productsSlice'

Most, mivel a slice-ban nem követjük a kérés 'pending' állapotát, tegyük úgy, hogy a felhasználó csak egyszer kattinthasson a termék mentése gombra, hiszen nincsenek szükségünk ugyanazokra az ismétlődő kérésekre. Ehhez hozzunk létre még egy lokális állapotot:

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

Ezután a kezelők után és a onSaveProductClick függvény előtt írjuk meg a kódot, amelyben ellenőrizzük, hogy minden mező ki van-e töltve és a kérés állapota 'idle'-e:

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

Majd módosítjuk a onSaveProductClick kódját. Először is ez egy aszinkron függvény lesz, és csak akkor hajtódik végre, ha a fenti feltétel igaz:

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

Annak ellenére, hogy a slice-ban nem követjük a 'rejected' állapotot, kiírhatjuk a hibát a konzolra, ehhez használjuk a try-catch konstrukciót. Itt hozzáadunk egy finally részt is, hogy a kérés végrehajtása után visszaállítsuk a lokális állapotot 'idle'-ra:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('Termék mentési hiba: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

A catch és finally blokkokkal megvagyunk, most írjuk meg a kódot a try blokkhoz. Itt beállítjuk a lokális állapotot 'in pogress'-re, amíg nem kapunk valamilyen választ a thunk működése eredményeképpen, majd elküldjük a addProduct thunk-ot. A try-catch konstrukció használatához a válasz típusától függően az RTK unwrap függvénye segít, amelyet hozzáad a visszaadott promise-hoz. Majd, ha a kérés sikeres volt, visszaállítjuk a lokális állapotokat kezdeti értékeikre. A teljes kód a onSaveProductClick-hoz így fog kinézni:

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('Termék mentési hiba: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Indítsuk el az alkalmazásunkat és próbáljunk hozzáadni egy új terméket. Amint látható, sikeres kérés esetén a mezők kiürülnek és az új termék hozzáadódik a terméklistához. Nézzük meg a böngészőben a Redux DevTools-ot is, kattintsunk a lapjai között, nézzük meg az action-öket és hogyan változik az állapot.

Nyisd meg a diák alkalmazásodat. Nyisd meg benne a NewStudentForm.jsx fájlt. Adj hozzá még egy lokális állapotot requestStatus, és állítsd be kezdetben 'idle'-ra. A lecke anyagának megismerése után hozz létre egy canBeSaved változót, amellyel a diák új adatainak mentése gombja működni fog/nem fog, a requestStatus értékétől és a mezők kitöltöttségétől függően.

Írj aszinkron kódot a onSaveStudentClick-hoz, ami megváltoztatja a requestStatus értékét a helyzettől függően, elküldi a addProduct thunk-ot az új diák adataival, üríti a mezőket sikeres kérés esetén és kiírja a konzolra a hibát sikertelenség esetén, ahogyan a leckében is láttuk. Használd ehhez a try-catch konstrukciót és az RTK unwrap függvényét.

Indítsd el az alkalmazásodat, adj hozzá egy új diákot és győződj meg róla, hogy minden működik.