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

Азыр ProductsList компонентинин return командасынын алдына шарттар менен код блогу жаз ар кандай мазмун 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' боюнча чыкылдайлы. Баары иштейт. Көрүп турабыз, болжол менен 2 секунд (биз серверде белгилегендей) биздин форманын астында өнүм кошуу боюнча жазуу 'Products list loading ...', көрүнүп турат, андан кийин өнүмдөрдүн тизмеси пайда болот.

Студенттер менен болгон колдонмонузду ачыңыз. Андагы StudentsList.jsx файлын ачыңыз. Анда жаңы компонент түзүңүз StudentCard. Анга dispStudentsтен кодду көчүрүңүз, сабакта көрсөтүлгөндөй.

StudentsList функциясында error жана content өзгөрмөлөрүн түзүңүз. Аткаргыла content өзгөрмөсүнө мазмунду сурам статусуна жараша. Унутпаңыз dispStudents ти content менен алмаштырууну.