Resultaten van thunk werk weergeven in component in Redux

In de vorige les hebben we een POST-verzoek verzonden met behulp van thunk addProduct. Laten we nu de resultaten van zijn werk weergeven in het component.

Laten we onze productenapplicatie openen, en daarin het bestand NewProductForm.jsx, omdat dit component verantwoordelijk is voor het toevoegen van een nieuw product. Laten we kijken naar de import regels. Laten we de import van de action productAdded vervangen door de import van thunk addProduct:

import { addProduct } from './productsSlice'

Nu, omdat we in de slice de status 'pending' van het verzoek niet volgen, laten we het zo maken dat de gebruiker maar één keer op de knop kan klikken om het product op te slaan, want we hebben dezelfde herhaalde verzoeken niet nodig. Hiervoor zullen we nog een lokale state aanmaken:

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

Vervolgens, na de handlers en vóór de functie onSaveProductClick, schrijven we code waarin we controleren of alle velden van het formulier zijn ingevuld en of de status van het verzoek op 'idle' staat:

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

Vervolgens zullen we de code voor onSaveProductClick wijzigen. Ten eerste zal dit een asynchrone functie zijn en deze zal alleen worden uitgevoerd als aan de bovenstaande voorwaarde is voldaan:

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

Ondanks dat we in de slice de status 'rejected' niet volgen, kunnen we toch een fout in de console weergeven, hiervoor gebruiken we de constructie try-catch. Hier voegen we ook finally toe, om na het uitvoeren van het verzoek opnieuw de lokale state in te stellen op 'idle':

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

We hebben de catch en finally blokken behandeld, laten we de code voor het try blok schrijven. Hier stellen we de lokale status in op 'in progress', totdat we een antwoord terugkrijgen als resultaat van het thunk werk, vervolgens sturen we onze thunk addProduct. Het gebruik van de constructie try-catch, afhankelijk van het type antwoord, wordt ons geholpen door de RTK functie unwrap, die het toevoegt aan de geretourneerde promise. Vervolgens, als het verzoek succesvol was, stellen we de lokale states in op hun initiële statussen. De volledige code voor onSaveProductClick ziet er als volgt uit:

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

Laten we onze applicatie starten en proberen een nieuw product toe te voegen. Zoals je ziet, in het geval van een succesvol verzoek worden de velden gewist en wordt het nieuwe product toegevoegd aan de productlijst. Kijk ook in de browser in Redux DevTools en navigeer door de tabbladen, bekijk de actions en hoe je state verandert.

Open je applicatie met studenten. Open daarin het bestand NewStudentForm.jsx. Voeg nog een lokale state requestStatus toe, en stel deze aanvankelijk in op 'idle'. Na bestudering van de lesmaterialen, maak de variabele canBeSaved aan, waarmee de knop voor het opslaan van nieuwe studentgegevens zal werken/niet werken, afhankelijk van de waarde van requestStatus en van de ingevulde velden.

Schrijf asynchrone code voor onSaveStudentClick, die de waarde van requestStatus zal wijzigen naar gelang de situatie, thunk addProduct zal verzenden met de gegevens van de nieuwe student, de velden zal legen in geval van een succesvol verzoek en een fout zal weergeven in de console in geval van mislukking, zoals getoond in de les. Gebruik hiervoor de constructie try-catch en de RTK functie unwrap.

Start je applicatie, voeg een nieuwe student toe en zorg ervoor dat alles werkt.