Anvendelse af forespørgselsstatus i Redux

På tidligere lektioner beskrevet vi ved hjælp af ekstra reducere, hvad vores applikation skal gøre, hvis fetchProducts sender under forespørgslen actionerne pending, fulfilled og rejected. Nu kan vi visse brugeren, på hvilket stadie datahentningen er.

Lad os åbne vores applikation med produkter, og i den filen ProductsList.jsx. Det første, vi gør, er at oprette en separat komponent for produktkortet ProductCard. Vi gør dette lige efter importlinjerne foran funktionen ProductsList. Som prop sender vi den product:

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

Og nu i de tomme runde parenteser return flytter vi al koden for visning af produktdata fra 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>
	)
}

Og fjerner i ProductsList den resterende linje kode. Den behøver vi ikke mere:

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

Og nu i starten af koden for funktionen ProductsList opretter vi et par variable mere, error og content. Den første vil være for fejl, i den anden vil vi indskrive det ene eller andet indhold afhængigt af forespørgselsstatus. Vi gør dette før const dataFetch = useRef(false):

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

Nu foran kommandoen return i komponenten ProductsList skriver vi en blok kode med betingelser, hvorunder der i content vil blive indsat det ene eller andet indhold afhængigt af status. Først beskriver vi status 'in progress' - når vores forespørgsel er sendt. I dette tilfælde vil vi informere brugeren om, at data hentes:

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

Hvis vores hentning lykkedes (vi betegnede dette som 'success'), så skal vi vise listen over modtagne produkter. Vi viser den i map ved hjælp af komponentet ProductCard, som vi sender product som prop til:

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

Og den sidste status, vi har - det er 'fail'. Lad os tilføje den også. Vi bruger her variablen error, som vi ovenfor skrev fejlen fra staten ind i:

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>
}

Og som sidste skridt erstatter vi i kodeblokken for return den gamle {dispProducts} med {content}.

Lad os starte vores applikation, klikke i menuen på 'Products'. Alt virker. Vi ser, at i ca. 2 sekunder (som vi indsatte på serveren) hænger der under formularen for tilføjelse af produkt teksten 'Products list loading ...', og derefter vises produktlisten.

Åbn din applikation med studerende. Åbn i den filen StudentsList.jsx. Opret i den en ny komponent StudentCard. Overfør til den koden fra dispStudents, som vist i lektionen.

Opret i funktionen StudentsList variablerne error og content. Tildel variablen content indhold afhængigt af forespørgselsstatus. Glem ikke at erstatte i den returnerede kode den gamle dispStudents med content.