Հարցման կարգավիճակի կիրառումը Redux-ում

Նախորդ դասերին մենք լրացուցիչ reducer-ների միջոցով նկարագրեցինք, թե ինչ պետք է անի մեր հավելվածը, եթե fetchProducts-ը հարցման ժամանակ ուղարկում է action-ներ pending, fulfilled և rejected։ Այժմ մենք կարող ենք ցույց տալ օգտատիրոջը, թե որ փուլում է ներկայումս տվյալների բեռնումը։

Եկեք բացենք մեր ապրանքների հավելվածը, իսկ դրա մեջ ProductsList.jsx ֆայլը։ Առաջին հերթին, մենք կստեղծենք առանձին բաղադրիչ ապրանքի քարտի համար ProductCard։ Կանենք դա անմիջապես ներմուծման տողերից հետո ProductsList ֆունկցիայից առաջ։ Որպես prop կփոխանցենք դրան product։

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

Իսկ այժմ դատարկ կլոր փակագծերի return մեջ կտեղափոխենք ապրանքի տվյալների ցուցադրման ամբողջ կոդը dispProducts-ից։

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

Իսկ ProductsList-ում կհեռացնենք մնացած տողը։ Այն մեզ այլևս պետք չէ։

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

Իսկ այժմ ProductsList ֆունկցիայի կոդի սկզբում կսահմանենք ևս մի քանի փոփոխական՝ error և content։ Առաջինը կլինի սխալի համար, երկրորդի մեջ կգրանցենք այս կամ այն պարունակությունը՝ կախված հարցման կարգավիճակից։ Կանենք դա const dataFetch = useRef(false)-ից առաջ։

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

Այժմ ProductsList բաղադրիչի return հրամանից առաջ կգրենք պայմաններով կոդի բլոկ, որոնց դեպքում content-ի մեջ կգրանցվի այս կամ այն պարունակությունը՝ կախված կարգավիճակից։ Առաջինը կնկարագրենք 'in progress' կարգավիճակը, երբ մեր հարցումը ուղարկված է։ Այս դեպքում մենք կտեղեկացնենք օգտատիրոջը, որ տվյալների բեռնում է ընթանում։

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
}

Եթե մեր բեռնումը հաջող է անցել (մենք դա նշել ենք որպես 'success'), ապա մենք պետք է ցուցադրենք ստացված ապրանքների ցանկը։ Կցուցադրենք այն map-ի միջոցով՝ օգտագործելով ProductCard բաղադրիչը, որին prop-ով կփոխանցենք product։

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

Իսկ վերջին կարգավիճակը, որ մենք ունենք - դա 'fail'-ն է։ Կավելացնենք նաև այն։ Այստեղ կօգտագործենք error փոփոխականը, որի մեջ մենք վերևում գրանցել ենք սխալը state-ից։

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

Իսկ վերջին քայլով մենք return-ի համար նախատեսված կոդի բլոկում կփոխարինենք հին {dispProducts}-ը {content}-ով։

Եկեք գործարկենք մեր հավելվածը, մենյույում կտտացնենք 'Products'-ին։ Ամեն ինչ աշխատում է։ Տեսնում ենք, որ մոտ 2 վայրկյան (ինչպես մենք սահմանել ենք սերվերում) ապրանք ավելացնելու ձևի տակ կախված է 'Products list loading ...' գրությունը, իսկ հետո հայտնվում է ապրանքների ցանկը։

Բացեք ձեր ուսանողների հավելվածը։ Բացեք դրա մեջ StudentsList.jsx ֆայլը։ Ստեղծեք դրա մեջ նոր բաղադրիչ StudentCard։ Տեղափոխեք դրա մեջ կոդը dispStudents-ից, ինչպես ցույց է տրված դասում։

Ստեղծեք StudentsList ֆունկցիայի մեջ error և content փոփոխականները։ Փոփոխականին content վերագրեք պարունակությունը՝ կախված հարցման կարգավիճակից։ Մի մոռացեք վերադարձվող վերստում dispStudents հինը փոխարինել content-ով։