Thunk жұмысының нәтижелерін Redux компонентінде көрсету

Алдыңғы сабақта біз POST-сұраныс жібердік thunk addProduct көмегімен. Енді оның жұмысының нәтижелерін компонентте көрсетейік.

Өнімдерімізбен қосымшамызды ашып, ондағы NewProductForm.jsx файлын ашайық, себебі бұл компонент жаңа өнімді қосуға жауапты. Импорт жолдарына қарайық. productAdded экшенін импорттауды thunk addProduct импорттауға ауыстырайық:

import { addProduct } from './productsSlice'

Енді, біз слайсте сұраныс статусын 'pending' бақыламағандықтан, пайдаланушының өнімді сақтау түймесін бір рет баса алатынын жасайық, себебі бізге бірдей қайталанатын сұраныстар қажет емес. Ол үшін тағы бір локальді стейт ашайық:

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

Әрі қарай обработчиктерден кейін және onSaveProductClick функциясының алдында форманың барлық өрістері толтырылғанын және сұраныс статусы 'idle' күйінде екенін тексеретін код жазайық:

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

Содан кейін біз onSaveProductClick үшін кодты өзгертеміз. Біріншіден, бұл асинхронды функция болады және ол жоғарыда көрсетілген шарт дұрыс болса орындалады:

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

Біз слайсте 'rejected' статусын бақыламасақ та, қатені консольге шығара аламыз, бұл үшін try-catch құрылымын қолданамыз. Сондай-ақ біз сұраныс орындалғаннан кейін локальді стейтті қайтадан 'idle' күйіне орнататын finally қосамыз:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('өнімді сақтау қатесі: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

catch және finally блоктарымен айналысып болдық, енді try блогына код жазайық. Мұнда біз локальді статусты 'in pogress' күйіне орнатамыз, thunk жұмысының нәтижесінде бізге қандай да бір жауап қайтқанша, содан кейін thunk addProduct жібереміз. Жауап түріне байланысты try-catch құрылымын қолдануға RTK-тің unwrap функциясы көмектеседі, ол қайтарылған промисқа қосылады. Содан кейін, егер сұраныс сәтті болса, біз локальді стейттерді олардың бастапқы күйлеріне орнатамыз. 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-ке кіріп, оның қойындыларымен танысып, экшендерге және стейтіңіздің қалай өзгеретініне назар аударыңыз.

Студенттерімізбен қосымшаны ашыңыз. Ондағы NewStudentForm.jsx файлын ашыңыз. Тағы бір локальді стейт requestStatus қосып, оны бастапқыда 'idle' күйіне орнатыңыз. Сабақ материалымен танысып, canBeSaved айнымалысын енгізіңіз, оның көмегімен жаңа студент деректерін сақтау түймесі жұмыс істейді/істемейді, байланысты requestStatus мәніне және өрістердің толтырылуына.

onSaveStudentClick үшін асинхронды код жазыңыз, ол жағдайға байланысты requestStatus мәнін өзгертеді, жаңа студенттің деректерімен thunk addProduct жібереді, сәтті сұраныс жағдайында өрістерді тазартады және сәтсіздік жағдайында қатені консольге шығарады, сабақта көрсетілгендей. Ол үшін try-catch құрылымын және RTK unwrap функциясын қолданыңыз.

Қосымшаңызды іске қосыңыз, жаңа студент қосыңыз және бәрі жұмыс істейтініне көз жеткізіңіз.