Prikaz rezultatov delovanja thunk v komponenti v Redux

V prejšnji lekciji smo poslali POST-poizvedbo z uporabo thunk addProduct. Zdaj pa prikažimo rezultate njegovega delovanja v komponenti.

Odprimo našo aplikacijo s produkti in v njej datoteko NewProductForm.jsx, saj je ta komponenta odgovorna za dodajanje novega produkta. Poglejmo vrstice z importi. Zamenjajmo import akcije productAdded z importom thunk addProduct:

import { addProduct } from './productsSlice'

Zdaj, ker v sliceu ne sledimo statusu 'pending' poizvedbe, naredimo tako, da lahko uporabnik klikne gumb za shranjevanje produkta le enkrat, saj nam niso potrebne enake ponavljajoče se poizvedbe. Za to bomo ustvarili še en lokalni state:

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

Nato po obdelovalcih in pred funkcijo onSaveProductClick napišimo kodo, v kateri preverimo, ali so vsa polja obrazca izpolnjena in ali je status poizvedbe 'idle':

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

Nato bomo spremenili kodo za onSaveProductClick. Prvič, to bo asinhrona funkcija in izvajala se bo, če velja zgoraj navedeni pogoj:

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

Kljub temu, da v sliceu ne sledimo statusu 'rejected', lahko še vedno izpišemo v konzolo napako, za to uporabimo konstrukcijo try-catch. Tukaj bomo dodali še finally, da po izvedbi poizvedbe ponovno nastavimo lokalni state na 'idle':

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('napaka pri shranjevanju produkta: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

S catch in finally bloki smo se razumeli, poglejmo kodo za blok try. Tukaj bomo nastavili lokalni status na 'in pogress', dokler se nam ne vrne kakšen odgovor kot rezultat delovanja thunk, nato pošljemo naš thunk addProduct. Uporaba konstrukcije try-catch glede na tip odgovora nam bo pomagala funkcija RTK unwrap, ki jo doda vrnjenemu promisu. Nato, če je bila poizvedba uspešna, nastavimo lokalne state v njihova začetna stanja. Popolna koda za onSaveProductClick bo videti takole:

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('napaka pri shranjevanju produkta: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Zaženimo našo aplikacijo in poskusimo dodati nov produkt. Kot vidite, v primeru uspešne poizvedbe se polja počistijo in nov produkt se doda v seznam produktov. Poglejte tudi v brskalniku v Redux DevTools in pojdite po njegovih zavihkih, poglejte akcije in kako se spreminja vaš state.

Odprite vašo aplikacijo s študenti. Odprite v njej datoteko NewStudentForm.jsx. Dodajte še en lokalni state requestStatus, in ga nastavite sprva na 'idle'. Po seznanitvi z gradivom lekcije, ustvarite spremenljivko canBeSaved, s pomočjo katere bo gumb za shranjevanje novih podatkov študenta deloval/ne deloval, odvisno od vrednosti requestStatus in od izpolnjenosti polj.

Napišite asinhrono kodo za onSaveStudentClick, ki bo spreminjala vrednost requestStatus glede na situacijo, pošiljala thunk addProduct s podatki novega študenta, čistila polja v primeru uspešne poizvedbe in izpisovala v konzolo napako v primeru neuspeha, kot je prikazano v lekciji. Uporabite za to konstrukcijo try-catch in funkcijo RTK unwrap.

Zaženite vašo aplikacijo, dodajte novega študenta in se prepričajte, da vse deluje.