Истифодаи статуси дархост дар Redux

Дар дарсҳои гузашта мо бо ёрии редюсерҳои иловагӣ тавсиф кардем, ки барномаи мо чӣ кор бояд кунад, агар fetchProducts ҳангоми дархост экшенҳои pending, fulfilled ва rejected-ро фиристода бошад. Ҳоло мо метавонем ба корбар нишон диҳем, ки дар кадом марҳила ҳозир боркунии маълумот аст.

Биёед барномаи худро бо маҳсулот кушоем, ва дар он файли ProductsList.jsx-ро. Аввалин чизе, ки мо мекунем, ин эҷоди як компоненти ҷудогона барои корти маҳсулот ProductCard мебошад. Инро фаълан пас аз сатрҳои воридот пеш аз функсияи ProductsList анҷом медиҳем. Ҳамчун пропс онро ба 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

Ҳоло пеш аз фармони return компоненти ProductsList блоки рамзро нависед бо шароитҳое, ки дар он content муҳтавои гуногунро дар вобастагӣ ба статус сабт мекунад. Аввалин мо статуси 'in progress'-ро тавсиф мекунем - вақте ки дархости мо фиристода шудааст. Дар ин ҳолат мо ба корбар хабар медиҳем, ки боркунии маълумот идома дорад:

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

Агар боркунии мо муваффақона сурат гирад (мо онро чун 'success' нишон додем), пас ба мо лозим аст, ки рӯйхати маҳсулотҳои гирифташударо чоп кунем. Онро дар map бо ёрии компоненти ProductCard чоп кунем, ки ба он пропси 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-ро истифода баред, ки мо дар боло хатогиро аз стейт сабт кардем:

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'-ро клик кунем. Ҳама чиз кор мекунад. Мeбинем, ки тақрибан 2 сония (ҳамчунон ки мо дар сервер муқаррар кардем) дар зери формҳои иловаи маҳсулот сатри 'Products list loading ...'-ро мебинем, ва баъд рӯйхати маҳсулотҳо пайдо мешавад.

Барномаи худро бо донишҷӯён кушоед. Дар он файли StudentsList.jsx-ро кушоед. Дар он компоненти нав эҷод кунед StudentCard. Рамзро аз dispStudents ба он гузаронед, ҳамчунон ки дар дарс нишон дода шудааст.

Дар функсияи StudentsList тағирёбандаҳои error ва content-ро эҷод кунед. Ба тағирёбандаи content муҳтаворо дар вобастагӣ ба статуси дархост муайян кунед. Фаромӯш накунед, ки дар верстаи баргардонидашуда dispStudents-и кӯҳнаро ба content иваз кунед.