Redux'те компонентте thunk иштеринин натыйжаларын көрсөтүү

Акыркы сабакта биз thunk addProduct жардамы менен POST-сурам жибердик. Келгиле, анын иштеринин натыйжаларын компонентте көрсөтөлү.

Продуктуларыбыз менен колдонмону ачалы, ал эми ичиндеги 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 блогу үчүн код жазалы. Бул жерде биз локальдик статусту thunk иштеринин натыйжасында кандайдыр бир жооп кайтып келгенине чейин 'in progress' кылабыз, андан соң 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 функциясын колдонуңуз.

Колдонмонузду иштетип, жаңы студент кошуп, бардыгы иштеп жатканына ынаныңыз.