Pieprasījuma statusa izmantošana Redux

Iepriekšējās nodarbībās mēs ar papildu reduceru palīdzību aprakstījām, ko mūsu lietotnei jādara, ja fetchProducts nosūta pieprasījuma laikā action pending, fulfilled un rejected. Tagad mēs varam parādīt lietotājam, kādā posmā pašlaik notiek datu ielāde.

Atvērsim mūsu produktu lietotni, un tajā failu ProductsList.jsx. Pirmā lieta, ko mēs darīsim, ir izveidot atsevišķu komponentu produktu kartītei ProductCard. Izveidosim to uzreiz pēc importa rindām pirms funkcijas ProductsList. Kā props padodam tam product:

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

Un tagad tukšajās apaļajās iekavās return pārvietosim visu kodu produkta datu attēlošanai no 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>
	)
}

Un noņemsim ProductsList atlikušo koda rindu. Tā mums vairs nav vajadzīga:

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

Un tagad koda sākumā funkcijā ProductsList izveidosim vēl pāris mainīgos, error un content. Pirmais būs kļūdai, otrajā mēs ierakstīsim to vai citu saturu atkarībā no pieprasījuma statusa. Izveidosim to pirms const dataFetch = useRef(false):

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

Tagad pirms komandas return komponenta ProductsList uzrakstīsim koda bloku ar nosacījumiem, kuros content tiks ielikts tas vai cits saturs atkarībā no statusa. Pirmo mēs aprakstīsim statusu 'in progress' - kad mūsu pieprasījums ir nosūtīts. Šajā gadījumā mēs paziņosim lietotājam, ka notiek datu ielāde:

if (productStatus === 'in progress') {
	content = <p>Produktu saraksta ielāde ...</p>
}

Ja mūsu ielāde ir veiksmīga (mēs to apzīmējām kā 'success'), tad mums jāparāda saraksts ar iegūtajiem produktiem. Parādīsim to ar map palīdzību, izmantojot komponentu ProductCard, kuram kā props padodam product:

if (productStatus === 'in progress') {
	content = <p>Produktu saraksta ielāde ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

Un pēdējais statuss, kas mums ir - tas ir 'fail'. Pievienosim arī to. Izmantosim šeit mainīgo error, kurā mēs augstāk ierakstījām kļūdu no state:

if (productStatus === 'in progress') {
	content = <p>Produktu saraksta ielāde ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

Un pēdējā solī mēs koda blokā return aizvietosim veco {dispProducts} ar {content}.

Palaidīsim mūsu lietotni, noklikšķinām izvēlnē uz 'Products'. Viss darbojas. Redzam, ka aptuveni 2 sekundes (kā mēs iestatījām serverī) zem produkta pievienošanas formas karājas uzraksts 'Produktu saraksta ielāde ...', un pēc tam parādās produktu saraksts.

Atveriet savu studentu lietotni. Atveriet tajā failu StudentsList.jsx. Izveidojiet tajā jaunu komponentu StudentCard. Pārvietojiet tajā kodu no dispStudents, kā parādīts nodarbībā.

Izveidojiet funkcijā StudentsList mainīgos error un content. Piešķiriet mainīgajam content saturu atkarībā no pieprasījuma statusa. Ne aizmirstiet aizvietot atgriežamajā izkārtojumā veco dispStudents ar content.