Reduxda thunk ish natijalarini komponentda ko'rsatish

Oldingi darsda biz POST-so'rovni thunk addProduct yordamida yubordik. Keling endi uning ish natijalarini komponentda ko'rsatamiz.

Mahsulotlar ilovamizni ochamiz, unda esa NewProductForm.jsx faylini, chunki bu komponent yangi mahsulot qo'shish uchun masuldur. Import qatorlariga qaraymiz. productAdded actionini import qilish o'rniga, thunk addProduct ni import qilamiz:

import { addProduct } from './productsSlice'

Endi, slice ichida so'rovning 'pending' holatini kuzatmasligimiz sababli, keling shunday qilaylikki, foydalanuvchi mahsulotni saqlash tugmasini faqat bir marta bosha olsin, chunki bizga bir xil takroriy so'rovlar kerak emas. Buning uchun yana bir lokal holat yaratamiz:

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

Keyin, handlerlardan keyin va onSaveProductClick funksiyasidan oldin, formaning barcha maydonlari to'ldirilganmi va so'rov holati 'idle' da turishini tekshiradigan kod yozamiz:

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

Keyin onSaveProductClick uchun kodni o'zgartiramiz. Birinchidan, bu async funksiya bo'ladi va u yuqoridagi shart to'g'ri bo'lsagina bajariladi:

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

Slaycida 'rejected' holatini kuzatmasak ham, brauzer konsolida xatoni ko'rsatishimiz mumkin, buning uchun try-catch konstruksiyasidan foydalanamiz. Shuningdek, bu yerda finally qo'shamiz, so'rov bajarilgandan keyin lokal holatni qayta 'idle' ga o'rnatish uchun:

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

catch va finally bloklari bilan ish bitdi, keling try bloki uchun kod yozaylik. Bu yerda biz lokal holatni 'in pogress' ga o'rnatamiz, thunk ishi natijasida qandaydir javob qaytmaguncha, keyin thunk addProduct ni yuboramiz. Thunk dan qaytgan promisga RTK tomonidan qo'shilgan unwrap funksiyasi javob turiga qarab try-catch dan foydalanishga yordam beradi. Keyin, agar so'rov muvaffaqiyatli bo'lsa, biz lokal holatlarni ularning boshlang'ich qiymatlariga o'rnatamiz. onSaveProductClick uchun to'liq kod quyidagicha ko'rinadi:

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('Mahsulotni saqlashda xato: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Ilovamizni ishga tushiramiz va yangi mahsulot qo'shishga harakat qilamiz. Ko'rib turganingizdek, muvaffaqiyatli so'rov holatida maydonlar tozalanadi va yangi mahsulot mahsulotlar ro'yxatiga qo'shiladi. Shuningdek, brauzeringizdagi Redux DevTools ni oching va uning tablarini ko'rib chiqing, actionlar va state qanday o'zgarayotganiga qarang.

Talabalar ilovangizni oching. Undagi NewStudentForm.jsx faylini oching. Yana bir lokal holat requestStatus qo'shing, va uning boshlang'ich qiymatini 'idle' ga o'rnating. Dars materiallari bilan tanishib chiqqach, canBeSaved o'zgaruvchisini yarating, uning yordamida yangi talaba ma'lumotlarini saqlash tugmasi requestStatus ning qiymati va maydonlarning to'ldirilishiga qarab ishlaydi/ishlamaydi.

onSaveStudentClick uchun async kod yozing, u vaziyatga qarab requestStatus ning qiymatini o'zgartiradi, addProduct thunk ini yangi talaba ma'lumotlari bilan yuboradi, muvaffaqiyatli so'rov holatida maydonlarni tozalaydi va muvaffaqiyatsizlik holatida xatoni konsolga chiqaradi, darsda ko'rsatilgandek. Buning uchun try-catch konstruksiyasi va RTK ning unwrap funksiyasidan foydalaning.

Ilovangizni ishga tushiring, yangi talaba qo'shing va hammasi ishlashiga ishonch hosil qiling.