Kuonyesha Matokeo ya Kazi ya Thunk katika Sehemu ya programu katika Redux

Katika somo lililopita tulitumia ombi la POST kwa kutumia thunk addProduct. Sasa hebu tuonyeshe matokeo ya kazi yake katika sehemu ya programu.

Washa programu yetu ya bidhaa, na ndani yake faili NewProductForm.jsx, kwa sababu hii sehemu ya programu inahusika na kuongeza bidhaa mpya. Tuangalie mistari yenye viingizo. Badilisha kiingizo cha kitendo productAdded, na kiingizo cha thunk addProduct:

import { addProduct } from './productsSlice'

Sasa, kwa kuwa hatufuatilii kwenye kipande cha hali statusi 'pending' ya ombi, hebu tufanye hivi, ili mtumiaji aweze kubonyeza kitufe cha kuokoa bidhaa mara moja tu, kwani hatuitaji maombi yanayorudiwa yale yale. Kwa hili tutaunda hali nyingine ya ndani:

const [requestStatus, setRequestStatus] = useState('idle')

Kisha baada ya vishughulikia na kabla ya kitendo onSaveProductClick tuandike msimbo, ambao utakuwa unaangalia, je sehemu zote za fomu zimejazwa na statusi ya ombi iko katika 'idle':

const canBeSaved =
	[name, desc, price, amount, sellerId].every(Boolean) &&
	requestStatus === 'idle'

Kisha tutabadilisha msimbo wa onSaveProductClick. Kwanza hii itakuwa kitendo cha asynchronosi na kitatekelezwa, kama sharti lililotajwa hapo juu ni kweli:

const onSaveProductClick = async () => {
	if (canBeSaved) {}
}

Licha ya kwamba katika kipande cha hali hatufuatilii statusi 'rejected', bado tunaweza kuonyesha kwenye konsoli kosa, kwa hili tutatumia muundo try-catch. Pia hapa tutaongeza na finally, ili baada ya ombi kutekelezwa tena kuweka hali ya ndani kuwa 'idle':

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error(save product error: , err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Tumemaliza na vitalu vya catch na finally, hebu tuandike msimbo wa kitengo cha try. Hapa tunaweka statusi ya ndani kuwa 'in pogress', hadi tutakapopata jibu lolote kutokana na kazi ya thunk, kisha tutumie thunk yetu addProduct. Kutumia muundo try-catch kulingana na aina ya jibu kutatusaidia kitendo cha RTK unwrap, ambacho kinaongeza kwa ahadi iliyorejeshwa. Kisha, ikiwa ombi lilifanikiwa tunaweka hali za ndani katika hali zao za kwanza. Msimbo kamili wa onSaveProductClick utakuwa kama hii:

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')
		}
	}
}

Washa programu yetu na tujaribu kuongeza bidhaa mpya. Kama unavyoona, katika kesi ya ombi lililofanikiwa sehemu husafishwa na bidhaa mpya inaongezwa kwenye orodha ya bidhaa. Pia angalia kivinjari kwenye Redux DevTools na uzipitie vitab wake, angalia vitendo na jinsi hali yako inavyobadilika.

Washa programu yako ya wanafunzi. Washa ndani yake faili NewStudentForm.jsx. Ongeza hali nyingine ya ndani requestStatus, na uiweke mwanzoni kuwa 'idle'. Ukishasomea nyenzo za somo, weka kigezo canBeSaved, ambacho kwa kutumia hicho kitufe cha kuokoa data mpya ya mwanafunzi kitafanya kazi/kutofanya kazi, kulingana na thamani ya requestStatus na kujazwa kwa sehemu.

Andika msimbo wa asynchronosi wa onSaveStudentClick, ambao utabadilisha thamani ya requestStatus kulingana na hali, utumie thunk addProduct na data ya mwanafunzi mpya, usafishe sehemu katika kesi ya ombi lililofanikiwa na uonyeshe kwenye konsoli kosa katika kesi ya kushindwa, kama ilivyoonyeshwa kwenye somo. Tumia kwa hili muundo try-catch na kitendo cha RTK unwrap.

Washa programu yako, ongeza mwanafunzi mpya na uhakikishe kuwa yote yanafanya kazi.