Приказ на резултатите од работата на thunk во компонента во Redux

На претходната лекција испративме POST-барање со помош на thunk addProduct. Ајде сега да ги прикажеме резултатите од неговата работа во компонентата.

Да ја отвориме нашата апликација со производи, а во неа датотеката NewProductForm.jsx, бидејќи оваа компонента е одговорна за додавање на нов производ. Ајде да ги погледнеме линиите со импортите. Да го замениме импортот на акцијата productAdded, со импорт на thunk addProduct:

import { addProduct } from './productsSlice'

Сега, бидејќи не го следиме во slice-от статусот 'pending' на барањето, ајде да направиме така што корисникот ќе може да кликне на копчето за зачувување на производот само еднаш, бидејќи не ни се потребни истите повторни барања. За да го направиме ова, ќе креираме уште една локална state променлива:

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

Потоа, по обработувачите и пред функцијата onSaveProductClick ќе напишеме код во кој ќе провериме дали сите полиња на формата се пополнети и дали статусот на барањето е 'idle':

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

Потоа ќе го смениме кодот за onSaveProductClick. Прво, тоа ќе биде асинхрона функција и ќе се извршува само ако е точно горенаведениот услов:

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

Иако во slice-от не го следиме статусот 'rejected', сепак можеме да ја испечатиме грешката во конзолата, за ова ќе ја користиме конструкцијата try-catch. Исто така овде ќе додадеме и finally, за по извршувањето на барањето повторно да ја поставиме локалната state променлива на 'idle':

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('Грешка при зачувување на производот: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Со catch и finally блоковите се справивме, ајде да го напишеме кодот за try блокот. Овде ќе ја поставиме локалната state променлива на 'in pogress', се додека не ни се врати некој одговор како резултат на работата на thunk-от, потоа ќе го испратиме нашиот thunk addProduct. Користењето на конструкцијата try-catch во зависност од типот на одговорот ќе ни помогне функцијата од RTK unwrap, која ја додава на вратениот promise. Потоа, ако барањето било успешно, ги поставуваме локалните state променливи на нивните почетни состојби. Целосниот код за onSaveProductClick ќе изгледа вака:

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('Грешка при зачувување на производот: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Да ја пуштиме нашата апликација и да се обидеме да додадеме нов производ. Како што можете да видите, во случај на успешно барање, полињата се чистат и новиот производ се додава во листата на производи. Исто така, погледнете во прелистувачот во Redux DevTools и прелистувајте низ неговите јазичи, погледнете ги акциите и како се менува вашата state променлива.

Отворете ја вашата апликација со студенти. Отворете ја во неа датотеката NewStudentForm.jsx. Додадете уште една локална state променлива requestStatus, и поставете ја првично на 'idle'. Со запознавање на материјалите од лекцијата, креирајте променлива canBeSaved, со чија помош копчето за зачувување на новите податоци за студентот ќе работи/не работи, во зависност од вредноста на requestStatus и од пополнетоста на полињата.

Напишете асинхрон код за onSaveStudentClick, кој ќе ја менува вредноста на requestStatus според ситуацијата, ќе го испраќа thunk-от addProduct со податоците на новиот студент, ќе ги чисти полињата во случај на успешно барање и ќе ја прикажува во конзола грешката во случај на неуспех, како што е прикажано во лекцијата. Користете за ова конструкција try-catch и функцијата од RTK unwrap.

Стартувајте ја вашата апликација, додадете нов студент и проверете дали сè работи.