Redux-da thunk işiniň netijelerini komponentde görkezmek

Öňki sapakda biz POST soragyny thunk addProduct ýardamy bilen iberdik. Indi onuň işiniň netijelerini komponentde görkezeliň.

Önümçiligiňiz bilen programmaňyzy açyň, we onuň içinde NewProductForm.jsx faýlyny açyň, sebäbi bu komponent täze önüm goşmak üçin jogapkär. Import satyrlaryna serediň. productAdded ekşenini import etmegi, thunk addProduct import etmek bilen çalyşyň:

import { addProduct } from './productsSlice'

Indi, sebäbi biz slýasde 'pending' soragynyň statusyny yzarlaýanok, geliň şeýle edeliň, ulanyjy önümi saklamak üçin düwmä diňe bir gezek basyp biler, sebäbi bize şol bir soraglary gaýtalamak gerek däl. Bunun üçin ýene bir lokal steýt döredeliň:

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

Soňra işleýjilerden soň we onSaveProductClick funksiýasyndan öň şuňa meňzeş kod ýazalyň, formanyň ähli meýdanlarynyň doldurylanmygyny we sorag statusynyň 'idle' ýagdaýynda ýatýandygyny barlalyň:

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

Soňra biz onSaveProductClick üçin kody üýtgederis. Birinjiden, bu asinhron funksiýa bolar we ýokardaky şert dogry bolanda işler:

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

Slýasde statusy 'rejected' yzarlanmasa-da, biz ýene-de konsolda ýalňyşlygy görkezyp bileris, bunun üçin try-catch gurluşyndan peýdalanyň. Şeýle hem bu ýerde biz ýene bir finally goşarys, sorag ýerine ýetirilenden soň lokal steýti 'idle' ýagdaýyna dikeltmek üçin:

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

catch we finally bloglary bilen işimiz gutardy, geliň try blogy üçin kod ýazalyň. Bu ýerde biz lokal statusy 'in progress' ýagdaýyna dikeris, thunk işiniň netijesinde birnäçe jogap gelýänçä, soňra thunk addProduct ibereris. Jogabyň görnüşine garap try-catch gurluşyndan peýdalanmak bize RTK-nuň unwrap funksiýasy ýardam eder, ony gaýdýan promisa goşýar. Soňra, sorag üstünlikli bolsa, lokal steýtleri başlangyç ýagdaýlaryna dikelderis. onSaveProductClick üçin doly kod şeýle görüner:

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

Programmany işledip, täze önüm goşmaga synanyşyň. Görşüňiz ýaly, üstünlikli soragda meýdanlar arassalanýar we täze önüm önümleriň sanawyna goşulýar. Şeýle hem brauzerde Redux DevTools-a girip we onuň goňmaçalary arasynda geziň, ekşenlere we steýtiňiziň nähili üýtşändigine serediň.

Okuwçylaryňyz bilen programmaňyzy açyň. Onyň içinde NewStudentForm.jsx faýlyny açyň. Ýene bir lokal steýt requestStatus goşuň, we ony başda 'idle' ýagdaýyna dikeltiň. Sapagyň materiallary bilen tanyşanyňyzdan soň, canBeSaved üýtgeýjisini dörediň, onuň ýardamy bilen täze okuwçynyň maglumatlaryny saklamak düwmesi işler/ýa-da işlemez, requestStatus üýtgeýjisiniň bahasyna we meýdanlaryň doldurulyşyna baglylykda.

onSaveStudentClick üçin asinhron kod ýazyň, requestStatus üýtgeýjisiniň bahasyny ýagdaýa görä üýtgeder, addProduct thunk-yny täze okuwçynyň maglumatlary bilen iberer, üstünlikli soragda meýdanlary arassalar we ýalňyşlykda konsolda ýalňyşlygy görkezer, sapakda görkezilişi ýaly. Bunuň üçin try-catch gurluşyndan we RTK-nuň unwrap funksiýasyndan peýdalanyň.

Programmaňyzy işledip, täze okuwçy goşuň we hemmesiniň işleýändigine göz ýetiriň.