Thunk darbo rezultatų atvaizdavimas komponente Redux

Ankstesnėje pamokoje mes išsiuntėme POST-užklausą naudodami thunk addProduct. Dabar atvaizduokime jo darbo rezultatus komponente.

Atidarykime mūsų produktų aplikaciją, o joje failą NewProductForm.jsx, kadangi šis komponentas yra atsakingas už naujo produkto pridėjimą. Pažiūrėkime į importų eilutes. Pakeiskime veiksmo productAdded importą, į thunk addProduct importą:

import { addProduct } from './productsSlice'

Dabar, kadangi mes sekame ne visus užklausos būsenas 'pending', padarykime taip, kad vartotojas galėtų paspausti mygtuką su produkto išsaugojimu tik vieną kartą, nes mums nereikia tų pačių pakartotinių užklausų. Tam sukurkime dar vieną lokalų būseną:

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

Toliau po apdorotojų ir prieš funkciją onSaveProductClick parašykime kodą, kuriame patikrinsime, ar visi formos laukai yra užpildyti ir ar užklausos būsena yra 'idle':

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

Tada pakeisime kodą onSaveProductClick. Pirma, tai bus asinchroninė funkcija ir ji bus vykdoma, jei teisinga aukščiau pateikta sąlyga:

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

Nepaisant to, kad mes nesekame būsenos 'rejected', mes vis tiek galime išvesti į konsolę klaidą, tam panaudosime konstrukciją try-catch. Taip pat čia pridėsime ir finally, kad po užklausos vykdymo vėl nustatytume lokalų būseną į 'idle':

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('produkto išsaugojimo klaida: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Su catch ir finally blokais mes susidorojome, tiesa try blokui. Čia mes nustatysime lokalų būseną į 'in pogress', kol mums negrįš koks nors atsakas dėl thunk veikimo, tada išsiųsime mūsų thunk addProduct. Naudoti konstrukciją try-catch priklausomai nuo atsako tipo mums padės RTK funkcija unwrap, kurią ji prideda prie grąžinamo promise. Tada, jei užklausa buvo sėkminga, mes nustatome lokalias būsenas į jų pradines būsenas. Pilnas kodas onSaveProductClick atrodys taip:

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('produkto išsaugojimo klaida: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Paleiskime mūsų aplikaciją ir pabandykime pridėti naują produktą. Kaip matote, sėkmingos užklausos atveju laukai išvalomi ir naujas produktas pridedamas į produktų sąrašą. Taip pat pažiūrėkite naršyklėje į Redux DevTools ir pereikite per jo skirtukus, pažiūrėkite į veiksmus ir kaip keičiasi jūsų būsena.

Atidarykite savo studentų aplikaciją. Atidarykite joje failą NewStudentForm.jsx. Pridėkite dar vieną lokalų būseną requestStatus, ir nustatykite ją iš pradžių į 'idle'. Susipažinę su pamokos medžiaga, sukurkite kintamąjį canBeSaved, kurio pagalba mygtukas naujų studento duomenų išsaugojimui bus veikiantis/neveikiantis, priklausomai nuo reikšmės requestStatus ir nuo laukų užpildymo.

Parašykite asinchroninį kodą onSaveStudentClick, kuris keis reikšmę requestStatus pagal situaciją, siųs thunk addProduct su naujo studento duomenimis, išvalys laukus sėkmingos užklausos atveju ir išves į konsolę klaidą nesėkmės atveju, kaip parodyta pamokoje. Naudokite tam konstrukciją try-catch ir RTK funkciją unwrap.

Paleiskite savo aplikaciją, pridėkite naują studentą ir įsitikinkite, kad viskas veikia.