Приказ резултата рада 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.

Покрените вашу апликацију, додајте новог студента и уверите се да све ради.