Prikaz rezultata rada thunk-a u komponenti u Redux-u

Na prošlom času poslali smo POST zahtev pomoću thunk-a addProduct. Hajde sada da prikažemo rezultate njegovog rada u komponenti.

Otvorimo našu aplikaciju sa proizvodima, i u njoj fajl NewProductForm.jsx, pošto je ova komponenta odgovorna za dodavanje novog proizvoda. Pogledajmo linije sa importom. Zamenimo import akcije productAdded, sa importom thunk-a addProduct:

import { addProduct } from './productsSlice'

Sada, pošto u slice-u ne pratimo status 'pending' zahteva, hajde da to učinimo tako, da korisnik može da klikne na dugme za čuvanje proizvoda samo jednom, jer nam ne trebaju isti ponovljeni zahtevi. Za ovo ćemo napraviti još jedno lokalno stanje:

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

Zatim, posle rukovalaca i pre funkcije onSaveProductClick napišimo kod u kojem proveravamo, da li su sva polja forme popunjena i da li je status zahteva u 'idle':

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

Zatim ćemo izmeniti kod za onSaveProductClick. Prvo, to će biti asinhrona funkcija i ona će se izvršavati, ako je gorenavedeni uslov ispunjen:

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

Uprkos tome što u slice-u ne pratimo status 'rejected', ipak možemo prikazati u konzoli grešku, za ovo ćemo iskoristiti konstrukciju try-catch. Takođe ovde ćemo dodati i finally, kako bismo posle izvršenja zahteva ponovo postavili lokalno stanje u 'idle':

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('greška pri čuvanju proizvoda: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Sa catch i finally blokovima smo završili, hajde da napišemo kod za try blok. Ovde ćemo postaviti lokalni status u 'in pogress', dok nam se ne vrati neki odgovor kao rezultat rada thunk-a, zatim pošaljemo naš thunk addProduct. Korišćenje konstrukcije try-catch u zavisnosti od tipa odgovora pomoći će nam funkcija RTK unwrap, koju on dodaje vraćenom promisu. Zatim, ako je zahtev bio uspešan postavljamo lokalna stanja u njihova početna stanja. Potpuni kod za onSaveProductClick će izgledati ovako:

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('greška pri čuvanju proizvoda: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Pokrenimo našu aplikaciju i pokušajmo da dodamo novi proizvod. Kao što vidite, u slučaju uspešnog zahteva polja se čiste i novi proizvod dodaje u listu proizvoda. Takođe pogledajte u pretraživaču Redux DevTools i prođite kroz njegove kartice, pogledajte akcije i kako se vaše stanje menja.

Otvorite vašu aplikaciju sa studentima. Otvorite u njoj fajl NewStudentForm.jsx. Dodajte još jedno lokalno stanje requestStatus, i postavite ga početno na 'idle'. Upoznavši se sa materijalom lekcije, napravite promenljivu canBeSaved, pomoću koje će dugme za čuvanje novih podataka studenta raditi/ne raditi, u zavisnosti od vrednosti requestStatus i od popunjenosti polja.

Napišite asinhroni kod za onSaveStudentClick, koji će menjati vrednost requestStatus po situaciji, slati thunk addProduct sa podacima novog studenta, čistiti polja u slučaju uspešnog zahteva i prikazivati u konzoli grešku u slučaju neuspeha, kao što je pokazano na lekciji. Koristite za ovo konstrukciju try-catch i funkciju RTK unwrap.

Pokrenite vašu aplikaciju, dodajte novog studenta i uverite se da sve radi.