Redux හි ඉල්ලීමේ තත්ත්වය භාවිතා කිරීම

පසුගිය පාඩම් වලදී, අපි අතිරේක reducers භාවිතා කරමින් විස්තර කලෙමු, අපගේ යෙදුමට කුමක් කළ යුතුද යන්න, fetchProducts ඉල්ලීමක් යවන විට pending, fulfilled සහ rejected actions එළියට යවන්නේ නම්. දැන් අපට පරිශීලකයාට දත්ත පූරණය වීමේ කුමන අදියරේදී යනවාද යන්න පෙන්විය හැකිය.

අපි අපගේ නිෂ්පාදන සමඟ යෙදුම විවෘත කරමු, එහි ProductsList.jsx ගොනුව. පළමුව, අපි කරන්නේ වෙනම අංගයක් නිර්මාණය කිරීමයි නිෂ්පාදන කාඩ්පත සඳහා ProductCard. අපි මෙය කරන්නේ ආයාත කිරීම් වලට පසුව, කාර්යයට පෙර ProductsList. props ලෙස අපි එයට සම්පූර්ණයෙන්ම යොමු කරමු 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 අංගය ඔස්සේ, එයට 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} />
	))
}

සහ අප සතුව ඇති අවසාන තත්ත්වය - එනම් '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 යොදාගැනීම.