Shfaqja e rezultateve të punës së thunk në komponent në Redux

Në seancën e kaluar ne dërguam një kërkesë POST duke përdorur thunk addProduct. Tani le të shfaqim rezultatet e punës së tij në komponent.

Le të hapim aplikacionin tonë me produktet, dhe në të skedarin NewProductForm.jsx, pasi ky komponent është përgjegjës për shtimin e një produkti të ri. Le të shohim rreshtat me importet. Le të zëvendësojmë importimin e veprimit productAdded, me importimin e thunk addProduct:

import { addProduct } from './productsSlice'

Tani, meqenëse ne nuk po gjurmojmë në slice statusin 'pending' të kërkesës, le ta bëjmë në mënyrë që përdoruesi të mund të klikojë në butonin për ruajtjen e produktit vetëm një herë, pasi ne nuk duam të njëjtat kërkesa të përsëritura. Për këtë, le të krijojmë një gjendje lokale tjetër:

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

Më pas, pas përpunuesve dhe përpara funksionit onSaveProductClick le të shkruajmë kod, në të cilin do të kontrollojmë nëse të gjitha fushat e formës janë plotësuar dhe nëse statusi i kërkesës është në 'idle':

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

Pastaj ne do të ndryshojmë kodin për onSaveProductClick. Së pari, ai do të jetë një funksion asinkron dhe do të ekzekutohet, nëse kushti i përmendur më sipër është i vërtetë:

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

Edhe pse ne nuk po gjurmojmë në slice statusin 'rejected', ne prapëseprapë mund të shfaqim në konsol një gabim, për këtë le të përdorim konstruksionin try-catch. Gjithashtu këtu do të shtojmë edhe finally, që pas përfundimit të kërkesës të vendosim përsëri gjendjen lokale në 'idle':

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('gabim në ruajtjen e produktit: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Me blloket catch dhe finally i jemi marrë, le të shkruajmë kodin për bllokun try. Këtu do të vendosim statusin lokal në 'in pogress', derisa të na kthehet ndonjë përgjigje si rezultat i punës së thunk, pastaj do të dërgojmë thunk-in tonë addProduct. Përdorimi i konstruksionit try-catch në varësi nga lloji i përgjigjes do të na ndihmojë funksioni RTK unwrap, të cilin ai e shton në promisin e kthyer. Pastaj, nëse kërkesa ishte e suksesshme ne vendosim gjendjet lokale në gjendjet e tyre fillestare. Kodi i plotë për onSaveProductClick do të duket kështu:

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('gabim në ruajtjen e produktit: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Le të startojmë aplikacionin tonë dhe të përpiqemi të shtojmë një produkt të ri. Siç e shihni, në rast të një kërkese të suksesshme fushat pastrohen dhe produkti i ri shtohet në listën e produkteve. Gjithashtu hidhini një sy në shfletues në Redux DevTools dhe shkoni nëpër skedat e tij, shikoni veprimet dhe mënyrën se si ndryshon gjendja juaj.

Hapni aplikacionin tuaj me studentët. Hapni në të skedarin NewStudentForm.jsx. Shtoni një gjendje lokale tjetër requestStatus, dhe vendoseni atë fillimisht në 'idle'. Duke u njohur me materialet e mësimit, krijoni ndryshoren canBeSaved, me ndihmën e së cilës butoni i ruajtjes së të dhënave të reja të studentit do të funksionojë/mos funksionojë, në varësi të vlerës së requestStatus dhe nga plotësimi i fushave.

Shkruani kod asinkron për onSaveStudentClick, i cili do të ndryshojë vlerën e requestStatus sipas situatës, do të dërgojë thunk addProduct me të dhënat e studentit të ri, do të pastrojë fushat në rast të një kërkese të suksesshme dhe do të shfaqë në konsol gabimin në rast dështimi, siç tregohet në mësim. Përdorni për këtë konstruksionin try-catch dhe funksionin RTK unwrap.

Startoni aplikacionin tuaj, shtoni një student të ri dhe sigurohuni që gjithçka funksionon.