Redux-ում thunk-ի աշխատանքի արդյունքների ցուցադրում կոմպոնենտում

Նախորդ դասին մենք ուղարկեցինք POST-հարցում օգտագործելով thunk addProduct: Հիմա եկեք ցուցադրենք դրա աշխատանքի արդյունքները կոմպոնենտում:

Բացենք մեր ապրանքների հավելվածը, և դրա մեջ NewProductForm.jsx ֆայլը, քանի որ այս կոմպոնենտը պատասխանատու է նոր ապրանք ավելացնելու համար: Նայենք իմպորտի տողերին: Փոխարինենք productAdded էքշնի իմպորտը addProduct thunk-ի իմպորտով:

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 ֆունկցիան:

Գործարկեք ձեր հավելվածը, ավելացրեք նոր ուսանող և համոզվեք, որ ամեն ինչ աշխատում է: