Натиҷаҳои кори 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('хати захира кардани маҳсулот: ', 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 истифода баред.

Барномаи худро оғоз кунед, донишҷӯи нав илова кунед ва боварӣ ҳосил кунед, ки ҳама чиз кор мекунад.