Përdorimi i statusit të kërkesës në Redux

Në mësimet e mëparshme ne me ndihmën e reducers shtesë përshkruam, çfarë duhet të bëjë aplikacioni ynë, nëse fetchProducts dërgon gjatë kërkesës actions pending, fulfilled dhe rejected. Tani ne mund t'i tregojmë përdoruesit në cilën fazë është aktualisht shkarkimi i të dhënave.

Le të hapim aplikacionin tonë me produktet, dhe në të file-in ProductsList.jsx. E para, çfarë do të bëjmë, është të krijojmë një komponent të veçantë për kartën e produktit ProductCard. Le ta bëjmë këtë menjëherë pas rreshtave të importit para funksionit ProductsList. Si props do t'i kalojmë atij product:

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

Dhe tani në kllapat e rrumbullakëta të zbrazëta return le të transferojmë të gjithë kodin për shfaqjen e të dhënave të produktit nga 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>
	)
}

Dhe le të heqim në ProductsList rreshtin e mbetur të kodit. Ajo nuk na duhet më:

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

Dhe tani në fillim të kodit të funksionit ProductsList le të krijojmë disa variabla të tjerë, error dhe content. E para do të jetë për gabimin, në të dytën ne do të regjistrojmë këtë ose atë përmbajtje në varësi të statusit të kërkesës. Le ta bëjmë këtë para const dataFetch = useRef(false):

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

Tani para komandës return të komponentit ProductsList le të shkruajmë një bllok kodi me kushte, në të cilat në content do futen këtë ose atë përmbajtje në varësi të statusit. Së pari do të përshkruajmë statusin 'in progress' - kur kërkesa jonë është dërguar. Në këtë rast ne do t'i njoftojmë përdoruesin që po shkarkohen të dhënat:

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

Nëse shkarkimi ynë ka kaluar me sukses (ne e kemi shënuar këtë si 'success'), atëherë ne duhet të shfaqim listën e produkteve të marra. Le ta shfaqim atë në map me ndihmën e komponentit ProductCard, cilit i kalojmë si props 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} />
	))
}

Dhe statusi i fundit, që kemi - ky është 'fail'. Le ta shtojmë edhe atë. Le të përdorim këtu variablin error, në të cilën kemi regjistruar më lart gabimin nga 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>
}

Dhe hapi i fundit ne në bllokun e kodit për return do të zëvendësojmë {dispProducts} të vjetër me {content}.

Le të startojmë aplikacionin tonë, të klikojmë në menu në 'Products'. Gjithçka funksionon. Shohim se afërsisht 2 sekonda (siç e kemi vendosur në server) nën formën e shtimit të produktit shfaqet shkrimi 'Products list loading ...', dhe pastaj shfaqet lista e produkteve.

Hapni aplikacionin tuaj me studentët. Hapni në të file-in StudentsList.jsx. Krijoni në të një komponent të ri StudentCard. Transferoni në të kodin nga dispStudents, siç tregohet në mësim.

Krijoni në funksionin StudentsList variablat error dhe content. Caktojini variablës content përmbajtjen në varësi të statusit të kërkesës. Mos harroni të zëvendësoni në pamjen e kthyer dispStudents të vjetër me content.