Matumizi ya Hali ya Ombi katika Redux

Katika masomo yaliyopita, kwa kutumia reducers za ziada tulielezea nini programu yetu ifanye, kama fetchProducts inatuma vitendo pending, fulfilled na rejected wakati wa ombi. Sasa tunaweza kumwonyesha mtumiaji hatua gani upakiaji wa data uko sasa.

Wacha tufungue programu yetu ya bidhaa, na ndani yake faili ProductsList.jsx. Jambo la kwanza tutakalofanya, ni kuunda komponeneti tofauti kwa kadi ya bidhaa ProductCard. Tutafanya hii mara baada ya mistari ya kuingiza kabla ya kitendo ProductsList. Kama props tutampelekea product:

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

Na sasa kwenye mabano ya duara tupu return tutahamisha msimbo wote wa kuonyesha data ya bidhaa kutoka 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>
	)
}

Na tutaondoa kwenye ProductsList mstari uliobaki wa msimbo. Hatuihitaji tena:

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

Na sasa mwanzoni mwa msimbo wa kitendo ProductsList tutaweka vigezo vingine viwili, error na content. Ya kwanza itakuwa kwa makosa, ya pili tutaweka yaliyomo mbalimbali kulingana na hali ya ombi. Tutafanya hii kabla ya const dataFetch = useRef(false):

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

Sasa kabla ya amri return ya componeneti ProductsList tunaandika kipande cha msimbo na masharti, ambapo content utawekwa yaliyomo mbalimbali kulingana na hali. Ya kwanza tutaelezea hali 'in progress' - wakati ombi letu limetumwa. Katika kesi hii tutamwambia mtumiaji kuwa data inapakuliwa:

if (productStatus === 'in progress') {
	content = <p>Orodha ya bidhaa inapakuliwa ...</p>
}

Kama upakiaji wetu umefanikiwa (tuliashiria hii kama 'success'), basi tunahitaji kuonyesha orodha ya bidhaa zilizopatikana. Tutaionyesha kwenye map kwa kutumia componeneti ProductCard, ambayo tutapeleka props product:

if (productStatus === 'in progress') {
	content = <p>Orodha ya bidhaa inapakuliwa ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

Na hali ya mwisho, ambayo tunayo - ni 'fail'. Tuiongeze pia. Tutumie hapa kigezo error, ambacho tulikiandika hapo juu kama kosa kutoka kwenye hali:

if (productStatus === 'in progress') {
	content = <p>Orodha ya bidhaa inapakuliwa ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

Na hatua ya mwisho, kwenye kipande cha msimbo cha return tutabadilisha {dispProducts} ya zamani kuwa {content}.

Wacha tuizindue programu yetu, bonyeza kwenye menyu kwa 'Products'. Yote inafanya kazi. Tunaona, kuwa takriban 2 sekunde (kama tulivyo weka kwenye seva) chini ya fomu ya kuongeza bidhaa kuna uandishi 'Orodha ya bidhaa inapakuliwa ...', na kisha orodha ya bidhaa inaonekana.

Fungua programu yako ya wanafunzi. Fungua ndani yake faili StudentsList.jsx. Unda ndani yake komponeneti mpya StudentCard. Hamisha ndani yake msimbo kutoka dispStudents, kama inavyoonyeshwa kwenye somo.

Unda katika kitendo StudentsList vigezo error na content. Kabidhi kigezo content yaliyomo kulingana na hali ya ombi. Usisahau kubadilisha kwenye muundo unaorudishwa dispStudents ya zamani kuwa content.