Показване на резултатите от работата на 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. Също така тук ще добавим и finally, за да върнем след изпълнението на заявката локалния стейт в 'idle':

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error(save product 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('save product error: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Нека стартираме нашето приложение и да опитаме да добавим нов продукт. Както виждате, в случай на успешна заявка полетата се изчистват и новият продукт се добавя в списъка с продукти. Също така погледнете в браузъра в Redux DevTools и разгледайте разделите му, вижте екшъните и как се променя вашият стейт.

Отворете вашето приложение със студенти. Отворете в него файла NewStudentForm.jsx. Добавете още един локален стейт requestStatus, и задайте първоначалната му стойност на 'idle'. След като се запознаете с материала от урока, създайте променлива canBeSaved, с помощта на която бутонът за запазване на новите данни за студента ще работи/не работи, в зависимост от стойността на requestStatus и от това дали полетата са попълнени.

Напишете асинхронен код за onSaveStudentClick, който ще променя стойността на requestStatus според ситуацията, изпраща thunk addProduct с данните за новия студент, изчиства полетата в случай на успешна заявка и извежда грешка в конзолата в случай на неуспех, както е показано в урока. Използвайте за целта конструкцията try-catch и функцията RTK unwrap.

Стартирайте вашето приложение, добавете нов студент и се уверете, че всичко работи.