Redux да thunk иш натижаларини компонентда кўрсатиш

Олдинги дарсда биз POST-соровни thunk addProduct ёрдамида юбордик. Келинг энди унинг иш натижаларини компонентда кўрсатамиз.

Махсулотлар билан ишлайдиган илованимизни очамиз, ва унда NewProductForm.jsx файлини очамиз, чунки бу компонент янги махсулот қўшиш учун масъул. Импорт қилиш сатрларига қараймиз. productAdded экшенини импортини, thunk addProduct импортига алмаштирамиз:

import { addProduct } from './productsSlice'

Энди, биз слайсда 'pending' соров статусини кузатмаганимиз сабабли, келинг шундай қилайликки, фойдаланувчи махсулотни сақлаш тугмасига фақат бир марта боса олсин, чунки bizga ўша бир хил такрорланган соровлар керак эмас. Бунинг учун яна битта локал стейт яратамиз:

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('save product 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('save product error: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Илованимизни ишга туширамиз ва янги махсулот қўшишни синаймиз. Кўриб турибсизки, муваффақиятли соров учун майдонлар тозаланади ва янги махсулот махсулотлар рўйхатига қўшилади. Шунингдек, браузерда Redux DevTools га кириб ва унинг варақлари бўйлаб юриб, экшенларга ва стейтингиз қандай ўзгараётишига қараб чиқинг.

Студентлар билан ишлайдиган иловангизни очинг. Унда NewStudentForm.jsx файлини очинг. Яна битта локал стейт requestStatus қўшинг, ва уни бошланғич ҳолда 'idle' га ўрнатинг. Дарс материаллари билан танишиб чиққач, canBeSaved ўзгарувчисини яратинг, унинг ёрдамида янги студент маълумотларини сақлаш тугмаси ишлайди/ишламайди, қийматга боглик бўлади requestStatus ва майдонларнинг тўлдирилганлиги.

onSaveStudentClick учун асинхрон код ёзинг, у requestStatus қийматини вазиятга қараб ўзгартиради, thunk addProduct ни янги студент маълумотлари билан юборади, майдонларни муваффақиятли соров учун тозалайди ва консолда хатоликни кўрсатади агар соров бўлмаса, дарсда кўрсатилганидек. Бунинг учун try-catch конструкцияси ва RTK нинг unwrap функциясидан фойдаланинг.

Иловангизни ишга туширинг, янги студент қўшинг ва ҳаммаси ишлашига ишонч ҳосил қилинг.