So'rov holatini Redux-da qo'llash

Oldingi darslarda biz qo'shimcha reducerlar yordamida ilovamiz nima qilishini tasvirladik, agar fetchProducts so'rov yuborganida actionlarni pending, fulfilled va rejected yuborsa. Endi biz foydalanuvchiga ma'lumotlarni yuklash qaysi bosqichda ekanligini ko'rsatishimiz mumkin.

Keling, mahsulotlar ilovamizni ochaylik, unda ProductsList.jsx faylini. Birinchi navbatda, alohida komponent yaratamiz mahsulot kartasi uchun ProductCard. Buni import qatorlaridan keyin darhol ProductsList funksiyasidan oldin qilamiz. Prop sifatida unga product ni uzatamiz:

const ProductCard = ({ product }) => {
	return ()
}

Endi bo'sh yumaloq qavslar return ichiga dispProducts dan mahsulot ma'lumotlarini ko'rsatish uchun bo'lgan barcha kodni ko'chiramiz:

const ProductCard = ({ product }) => {
	return (
		<div key={product.id} className="product-excerpt">
			<h3>{product.name}</h3>
			<SellerOfProd sellerId={product.seller} />
			<p>{product.desc.substring(0, 100)}</p>
			<UserReactions product={product} />
			<Link to={`/products/${product.id}`} className="link-btn">
				view
			</Link>
		</div>
	)
}

Va ProductsList da qolgan qatorni olib tashlaymiz kod. Bu endi bizga kerak emas:

const dispProducts = products.map((product) => ())

Endi ProductsList funksiyasi kodining boshida yana bir nechta o'zgaruvchi yaratamiz, error va content. Birinchisi xato uchun bo'ladi, ikkinchisiga biz so'rov holatiga qarab turli mazmunni yozamiz. Buni const dataFetch = useRef(false) dan oldin qilamiz:

const error = useSelector((state) => state.products.error)
let content

Endi ProductsList komponentining return buyrug'idan oldin shartli kod blokini yozamiz, qaysiki content ga holatga qarab turli mazmun qo'yiladi. Birinchi bo'lib biz 'in progress' holatini tasvirlaymiz - so'rovimiz yuborilganda. Bu holda biz foydalanuvchiga ma'lumotlar yuklanyapti degan xabarni beramiz:

if (productStatus === 'in progress') {
	content = <p>Mahsulotlar ro'yxati yuklanmoqda ...</p>
}

Agar yuklash muvaffaqiyatli bo'lsa (biz buni 'success' deb belgilagan edik), unda bizga olingan mahsulotlar ro'yxatini chiqarish kerak. Uni map da ProductCard komponenti yordamida chiqaramiz, unga prop sifatida product ni uzatamiz:

if (productStatus === 'in progress') {
	content = <p>Mahsulotlar ro'yxati yuklanmoqda ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

Va bizda mavjud bo'lgan oxirgi holat - bu 'fail'. Uni ham qo'shamiz. Bu yerda error o'zgaruvchisidan foydalanamiz, biz yuqorida unga statedagi xatoni yozgan edik:

if (productStatus === 'in progress') {
	content = <p>Mahsulotlar ro'yxati yuklanmoqda ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

Va oxirgi qadam sifatida biz return uchun kod blokida eski {dispProducts} ni {content} ga almashtiramiz.

Ilovamizni ishga tushiramiz, menyuda 'Products' ni bosing. Hammasi ishlaydi. Ko'ramizki, tahminan 2 soniya (serverda belgilaganimizdek) mahsulot qo'shish formasi ostida 'Mahsulotlar ro'yxati yuklanmoqda ...' yozuvi ko'rinadi, keyin esa mahsulotlar ro'yxati paydo bo'ladi.

Talabalar ilovangizni oching. Undagi StudentsList.jsx faylini oching. Unda yangi komponent yarating StudentCard. Undagi kodni dispStudents dan ko'chiring, darsda ko'rsatilgandek.

StudentsList funksiyasida error va content o'zgaruvchilarini yarating. content o'zgaruvchisiga so'rov holatiga qarab mazmun belgilang. Qaytarilayotgan verstkada eski dispStudents ni content ga almashtirishni unutmang.