Zobrazenie výsledkov práce thunku v komponente v Reduxe

Na minulej hodine sme odoslali POST-požiadavku pomocou thunku addProduct. Poďme teraz zobraziť výsledky jeho práce v komponente.

Otvorte našu aplikáciu s produktmi a v nej súbor NewProductForm.jsx, pretože tento komponent je zodpovedný za pridanie nového produktu. Pozrime sa na riadky s importom. Nahraďte import akcie productAdded, importom thunku addProduct:

import { addProduct } from './productsSlice'

Teraz, keďže v slice nesledujeme stav 'pending' požiadavky, urobme to tak, aby používateľ mohol kliknúť na tlačidlo uloženia produktu iba raz, pretože nechceme rovnaké opakované požiadavky. Na to vytvoríme ďalší lokálny stav:

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

Ďalej po obslužných funkciách a pred funkciou onSaveProductClick napíšeme kód, v ktorom skontrolujeme, či sú všetky polia formulára vyplnené a či je stav požiadavky v 'idle':

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

Potom zmeníme kód pre onSaveProductClick. Po prvé, pôjde o asynchrónnu funkciu a bude sa vykonávať, ak platí vyššie uvedená podmienka:

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

Napriek tomu, že v slice nesledujeme stav 'rejected', môžeme napriek tomu vypísať do konzoly chybu, na to použijeme konštrukciu try-catch. Tiež tu pridáme aj finally, aby sme po vykonaní požiadavky znova nastavili lokálny stav na 'idle':

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('chyba uloženia produktu: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

S blokmi catch a finally sme sa porozprávali, poďme napísať kód pre blok try. Tu nastavíme lokálny stav na 'in pogress', kým sa nám nevráti nejaká odpoveď ako výsledok práce thunku, potom odošleme náš thunk addProduct. Použiť konštrukciu try-catch v závislosti od typu odpovede nám pomôže funkcia RTK unwrap, ktorú pridá k vrátenému promisu. Potom, ak bola požiadavka úspešná, nastavíme lokálne stavy do ich počiatočných stavov. Úplný kód pre onSaveProductClick bude vyzerať takto:

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('chyba uloženia produktu: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Spustíme našu aplikáciu a skúsme pridať nový produkt. Ako vidíte, v prípade úspešnej požiadavky sa polia vyčistia a nový produkt sa pridá do zoznamu produktov. Tiež sa pozrite v prehliadači do Redux DevTools a prebehnite sa po jeho záložkách, pozrite sa na akcie a ako sa mení váš stav.

Otvorte vašu aplikáciu so študentmi. Otvorte v nej súbor NewStudentForm.jsx. Pridajte ďalší lokálny stav requestStatus, a nastavte ho spočiatku na 'idle'. Po oboznámení sa s materiálmi lekcie, vytvorte premennú canBeSaved, pomocou ktorej tlačidlo uloženia nových údajov študenta bude fungovať/nefungovať, v závislosti od hodnoty requestStatus a od vyplnenosti polí.

Napíšte asynchrónny kód pre onSaveStudentClick, ktorý bude meniť hodnotu requestStatus podľa situácie, odosielať thunk addProduct s údajmi nového študenta, čistiť polia v prípade úspešnej požiadavky a vypísať do konzoly chybu v prípade neúspechu, ako je ukázané v lekcii. Použite na to konštrukciu try-catch a funkciu RTK unwrap.

Spustite vašu aplikáciu, pridajte nového študenta a uistite sa, že všetko funguje.