Thunk darba rezultātu attēlošana komponentē Redux

Iepriekšējā nodarbībā mēs nosūtījām POST pieprasījumu izmantojot thunk addProduct. Tagad attēlosim tā darbības rezultātus komponentē.

Atvērsim mūsu lietotni ar produktiem, un tajā failu NewProductForm.jsx, jo šis komponents ir atbildīgs par jauna produkta pievienošanu. Apskatīsim rindiņas ar importēšanu. Aizstāsim ekshena productAdded importēšanu, ar thunk addProduct importēšanu:

import { addProduct } from './productsSlice'

Tagad, tā kā mēs slice nesekojam pieprasījuma statusu 'pending', darīsim tā, lai lietotājs varētu noklikšķināt uz pogas ar produkta saglabāšanu tikai vienu reizi, jo mums nav vajadzīgi tie paši atkārtotie pieprasījumi. Lai to izdarītu, izveidosim vēl vienu lokālo stāvokli:

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

Tālāk pēc apstrādātājiem un pirms funkcijas onSaveProductClick uzrakstīsim kodu, kurā pārbaudīsim, vai visi formas lauki ir aizpildīti un vai pieprasījuma statuss atrodas 'idle':

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

Pēc tam mēs mainīsim kodu priekš onSaveProductClick. Pirmkārt tā būs asinhrona funkcija un tā izpildīsies, ja ir patiess iepriekš minētais nosacījums:

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

Pat ja mēs slice nesekojam statusu 'rejected', mēs joprojām varam izvadīt konsolē kļūdu, šim nolūkam izmantosim konstrukciju try-catch. Arī šeit mēs pievienosim vēl finally, lai pēc pieprasījuma izpildes atkal iestatītu lokālo stāvokli uz 'idle':

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

Ar catch un finally blokiem mēs esam tikuši galā, pievērsīsim uzmanību kodam try blokam. Šeit mēs iestatīsim lokālo statusu uz 'in pogress', līdz mums atgriezīsies kāda atbilde thunk darbības rezultātā, pēc tam nosūtīsim mūsu thunk addProduct. Izmantot konstrukciju try-catch atkarībā no atbildes veida mums palīdzēs RTK funkcija unwrap, ko tas pievieno atgrieztajam promise. Pēc tam, ja pieprasījums bija veiksmīgs, mēs iestatām lokālos stāvokļus to sākotnējās stāvokļos. Pilns kods priekš onSaveProductClick izskatīsies šādi:

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')
		}
	}
}

Palaidīsim mūsu lietotni un mēģināsim pievienot jaunu produktu. Kā jūs redzat, veiksmīga pieprasījuma gadījumā lauki tiek notīrīti un jauns produkts tiek pievienots produktu sarakstā. Apskatieties arī pārlūkprogrammā Redux DevTools un pārlūkojiet pa tā cilnēm, apskatiet ekshenus un to, kā mainās jūsu stāvoklis.

Atveriet savu lietotni ar studentiem. Atveriet tajā failu NewStudentForm.jsx. Pievienojiet vēl vienu lokālo stāvokli requestStatus, un iestatiet to sākotnēji uz 'idle'. Iepazīstoties ar nodarbības materiāliem, izveidojiet mainīgo canBeSaved, ar kuras palīdzību poga jaunu studenta datu saglabāšanai strādās/ nestrādās, atkarībā no requestStatus vērtības un no lauku aizpildījuma.

Uzrakstiet asinhronu kodu priekš onSaveStudentClick, kas mainīs requestStatus vērtību pēc situācijas, sūtīs thunk addProduct ar jauna studenta datiem, notīrīs laukus veiksmīga pieprasījuma gadījumā un izvadīs konsolē kļūdu neveiksmes gadījumā, kā parādīts nodarbībā. Izmantojiet šim nolūkam konstrukciju try-catch un RTK funkciju unwrap.

Palaidiet savu lietotni, pievienojiet jaunu studentu un pārliecinieties, ka viss darbojas.