Thunki töö tulemuste kuvamine komponendis Reduxis

Eelmisel tunnil saatsime POST-päringu kasutades thunki addProduct. Nüüd kuvame tema töö tulemused komponendis.

Avame oma tootega rakenduse ja selles faili NewProductForm.jsx, kuna see komponent on vastutav uue toote lisamise eest. Vaadake importimise ridu. Asendame aktsiooni productAdded importimise thunki addProduct importimisega:

import { addProduct } from './productsSlice'

Nüüd, kuna me ei jälgi slaisis staatuset 'pending', teeme nii, et kasutaja saaks vajutada toote salvestamise nupule ainult ühe korra, sest meil ei ole vaja samu korduvaid päringuid. Selleks loome veel ühe lokaalse seisundi:

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

Järgmisena pärast käitlejaid ja enne funktsiooni onSaveProductClick kirjutame koodi, milles kontrollime, kas kõik vormi väljad on meil täidetud ja kas päringu staatus on 'idle':

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

Siis muudame koodi onSaveProductClick jaoks. Esiteks see on asünkroonne funktsioon ja see täidetakse, kui ülaltoodud tingimus kehtib:

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

Hoolimata asjaolust, et me ei jälgi slaisis staatuset 'rejected', saame ikkagi konsooli vea kuvada, selleks kasutame konstruktsiooni try-catch. Siin lisame ka finally, et pärast päringu täitmist uuesti seada lokaalse seisundi 'idle':

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

catch ja finally plokkidega saime hakkama, andke kirjutame koodi try ploki jaoks. Siin seame lokaalse staatuse 'in pogress', kuni meile ei tagastata mingit vastust thunki töö tulemusena, siis saadame oma thunki addProduct. Kasutada konstruktsiooni try-catch sõltuvalt vastuse tüübist aitab meil RTK funktsioon unwrap, mille ta lisab tagastatavale promisile. Siis, kui päring oli edukas, seame lokaalsed seisundid nende algseisunditesse. Täielik kood onSaveProductClick jaoks näeb välja selline:

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('Toote salvestamise viga: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Käivitame oma rakenduse ja proovime lisada uue toote. Nagu näete, edukal päringul väljad puhastuvad ja uus toode lisatakse toodete nimekirja. Vaadake ka brauseris Redux DevTools ja navigeerige selle vahekaartidel, vaadake aktsioone ja kuidas teie seisund muutub.

Avage oma õpilastega rakendus. Avage selles fail NewStudentForm.jsx. Lisage veel üks lokaalne seisund requestStatus, ja seage see algselt 'idle'. Tunni materjalidega tutvudes, looge muutuja canBeSaved, mille abil uue õpilase andmete salvestamise nupp töötab/ei tööta, sõltuvalt väärtusest requestStatus ja väljade täidetusest.

Kirjutage asünkroonne kood onSaveStudentClick jaoks, mis muudab väärtust requestStatus olukorra järgi, saadab thunki addProduct uue õpilase andmetega, puhastab väljad eduka päringu korral ja kuvab konsoolis vea ebaõnnestumise korral, nagu näidatud tunnis. Kasutage selleks konstruktsiooni try-catch ja RTK funktsiooni unwrap.

Käivitage oma rakendus, lisage uus õpilane ja veenduge, et kõik töötab.