Visning af thunk-resultater i en komponent i Redux

I den forrige lektion sendte vi en POST-forespørgsel ved hjælp af thunken addProduct. Lad os nu visse resultaterne af dens arbejde i komponenten.

Åbn vores applikation med produkter, og i den filen NewProductForm.jsx, da dette komponent er ansvarlig for at tilføje et nyt produkt. Lad os se på import-linjerne. Lad os erstatte importen af actionen productAdded med importen af thunken addProduct:

import { addProduct } from './productsSlice'

Nu, da vi ikke sporer status 'pending' for forespørgslen i slicen, lad os gøre det sådan, at brugeren kun kan klikke på knappen til at gemme produktet én gang, da vi ikke har brug for de samme gentagne forespørgsler. For at gøre dette opretter vi endnu en lokal state:

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

Dernæst, efter behandlerne og før funktionen onSaveProductClick, skriver vi kode, hvor vi kontrollerer, om alle formularfelter er udfyldt og om forespørgselsstatusen er 'idle':

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

Derefter ændrer vi koden for onSaveProductClick. For det første vil dette være en asynkron funktion, og den vil kun udføres, hvis betingelsen ovenfor er sand:

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

På trods af at vi ikke sporer status 'rejected' i slicen, kan vi alligevel vise fejlen i konsollen, for at gøre dette bruger vi konstruktionen try-catch. Her tilføjer vi også finally, så vi efter udførelsen af forespørgslen igen sætter den lokale state 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, lad os skrive koden for try blokken. Her sætter vi den lokale status til 'in pogress', indtil vi får et svar tilbage som et resultat af thunkens arbejde, og sender derefter vores thunk addProduct. For at bruge konstruktionen try-catch afhængigt af svartypen vil RTK-funktionen unwrap hjælpe os, som den tilføjer til den returnerede promise. Derefter, hvis forespørgslen var succesfuld, sætter vi de lokale states til deres oprindelige tilstande. Den fulde kode for onSaveProductClick vil se sådan ud:

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

Lad os starte vores applikation og prøve at tilføje et nyt produkt. Som du kan se, ved en succesfuld forespørgsel ryddes felterne, og det nye produkt tilføjes til produktlisten. Kig også i browseren i Redux DevTools og gennemgå dens faner, se på actions og hvordan din state ændrer sig.

Åbn din applikation med studerende. Åbn filen NewStudentForm.jsx i den. Tilføj endnu en lokal state requestStatus, og sæt den oprindeligt til 'idle'. Efter at have gennemgået lektionens materiale, opret variablen canBeSaved, ved hjælp af hvilken knappen til at gemme nye studerendedata vil virke/ikke virke, afhængigt af værdien af requestStatus og om felterne er udfyldt.

Skriv asynkron kode for onSaveStudentClick, som vil ændre værdien af requestStatus efter situationen, sende thunken addProduct med data for den nye studerende, rydde felter ved en succesfuld forespørgsel og vise fejlen i konsollen ved fiasko, som vist i lektionen. Brug til dette konstruktionen try-catch og RTK-funktionen unwrap.

Start din applikation, tilføj en ny studerende og vær sikker på, at alt fungerer.