Visning av thunk-resultater i en komponent i Redux

I forrige leksjon sendte vi en POST-forespørsel ved hjelp av thunk addProduct. La oss nå vise resultatene av dens arbeid i komponenten.

La oss åpne applikasjonen vår med produkter, og i den filen NewProductForm.jsx, siden denne komponenten er ansvarlig for å legge til et nytt produkt. La oss se på linjene med importer. La oss erstatte importen av action productAdded med importen av thunk addProduct:

import { addProduct } from './productsSlice'

Nå, siden vi ikke sporer statusen 'pending' for forespørselen i slicen, la oss gjøre slik at brukeren bare kan trykke på knappen for å lagre produktet én gang, fordi vi ikke trenger de samme gjentatte forespørslene. For å gjøre dette, la oss opprette en annen lokal state:

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

Deretter, etter hendelseshåndtererne og før funksjonen onSaveProductClick, la oss skrive kode der vi sjekker om alle skjemafeltene er fylt ut og om forespørselsstatusen er 'idle':

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

Deretter vil vi endre koden for onSaveProductClick. For det første vil dette være en asynkron funksjon, og den vil utføres hvis betingelsen ovenfor er sann:

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

Selv om vi ikke sporer statusen 'rejected' i slicen, kan vi likevel vise feilen i konsollen, for å gjøre dette vil vi bruke konstruksjonen try-catch. Her vil vi også legge til finally, for etter at forespørselen er utført, å sette den lokale staten tilbake til 'idle':

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

Vi har behandlet catch og finally blokkene, la oss skrive koden for try blokken. Her vil vi sette den lokale statusen til 'in progress' inntil vi får et svar som et resultat av thunk-arbeidet, deretter sender vi thunk addProduct. For å bruke try-catch konstruksjonen avhengig av type svar, vil RTK-funksjonen unwrap hjelpe oss, som den legger til i den returnerte promise. Deretter, hvis forespørselen var vellykket, setter vi de lokale statene tilbake til deres opprinnelige tilstander. Den fullstendige koden for onSaveProductClick vil se slik ut:

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

La oss starte applikasjonen vår og prøve å legge til et nytt produkt. Som du ser, i tilfelle en vellykket forespørsel, tømmes feltene og det nye produktet legges til i produktlisten. Se også i nettleseren i Redux DevTools og bla gjennom fanene, se på actions og hvordan staten din endres.

Åpne applikasjonen din med studenter. Åpne filen NewStudentForm.jsx i den. Legg til en annen lokal state requestStatus, og sett den initialt til 'idle'. Etter å ha sett på materialet fra leksjonen, opprett variabelen canBeSaved, ved hjelp av denne vil knappen for å lagre nye studentdata fungere/ikke fungere, avhengig av verdien av requestStatus og om feltene er fylt ut.

Skriv asynkron kode for onSaveStudentClick, som vil endre verdien av requestStatus avhengig av situasjonen, sende thunk addProduct med data for den nye studenten, tømme feltene ved vellykket forespørsel og vise feilen i konsollen ved mislykket forsøk, som vist i leksjonen. Bruk for dette konstruksjonen try-catch og RTK-funksjonen unwrap.

Start applikasjonen din, legg til en ny student og forsikre deg om at alt fungerer.