Bruk av forespørselsstatus i Redux

På tidligere timer brukte vi ekstra reducere for å beskrive hva applikasjonen vår skal gjøre hvis fetchProducts sender handlingene pending, fulfilled og rejected under en forespørsel. Nå kan vi vise brukeren på hvilket stadium datahentingen befinner seg.

La oss åpne applikasjonen vår med produkter, og i den filen ProductsList.jsx. Det første vi gjør er å opprette en separat komponent for produktkortet ProductCard. Vi gjør dette rett etter importsetningene før funksjonen ProductsList. Vi sender product til den som en prop:

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

Og nå i de tomme runde parentesene return flytter vi all koden for visning av 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 vi fjerner den gjenværende linjen i ProductsList. Vi trenger den ikke lenger:

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

Og nå i starten av koden til funksjonen ProductsList oppretter vi et par variabler til, error og content. Den første vil være for feil, i den andre vil vi skrive ulikt innhold avhengig av forespørselsstatusen. Vi gjør dette før const dataFetch = useRef(false):

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

Nå før return-kommandoen i ProductsList-komponenten skriver vi en kodeblokk med betingelser, der content vil få ulikt innhold avhengig av status. Først beskriver vi statusen 'in progress' - når forespørselen vår er sendt. I dette tilfellet vil vi informere brukeren om at data lastes:

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

Hvis lasting var vellykket (vi betegnet dette som 'success'), må vi vise listen over mottatte produkter. Vi viser den i map ved hjelp av komponenten ProductCard, som vi sender product som en 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 siste statusen vi har - dette er 'fail'. La oss legge den til. Vi bruker her variabelen error, som vi ovenfor skrev feilen til fra staten:

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 siste steg erstatter vi i kodeblokken for return den gamle {dispProducts} med {content}.

La oss starte applikasjonen vår, klikk i menyen på 'Products'. Alt fungerer. Vi ser at i omtrent 2 sekunder (som vi satte på serveren) henger det en melding under produktleggingsskjemaet 'Products list loading ...', og deretter dukker produktlisten opp.

Åpne applikasjonen din med studenter. Åpne filen StudentsList.jsx i den. Opprett en ny komponent StudentCard i den. Flytt koden fra dispStudents til den, som vist i leksjonen.

Opprett variablene error og content i funksjonen StudentsList. Tilordne variabelen content innhold avhengig av forespørselsstatusen. Ikke glem å erstatte i den returnerte oppstillingen den gamle dispStudents med content.