Användning av förfrågningsstatus i Redux

På tidigare lektioner använde vi oss av ytterligare reducers för att beskriva vad vår applikation ska göra om fetchProducts skickar ut actions pending, fulfilled och rejected under en förfrågan. Nu kan vi visa användaren i vilket stadie datahämtningen befinner sig.

Låt oss öppna vår produktapplikation, och i den filen ProductsList.jsx. Det första vi gör är att skapa en separat komponent för produktkortet ProductCard. Vi gör detta direkt efter importraderna före funktionen ProductsList. Vi skickar med product som prop:

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

Och nu i de tomma parenteserna return flyttar vi över all kod för att visa produktdata från 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>
	)
}

Och vi tar bort den återstående raden koden i ProductsList. Den behöver vi inte längre:

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

Och nu i början av funktionen ProductsList skapar vi ytterligare ett par variabler, error och content. Den första är för fel, i den andra kommer vi att skriva in olika innehåll beroende på förfrågningsstatus. Vi gör detta före const dataFetch = useRef(false):

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

Nu före kommandot return i komponenten ProductsList skriver vi ett kodblock med villkor, där content kommer att fyllas med olika innehåll beroende på status. Först beskriver vi statusen 'in progress' - när vår förfrågan är skickad. I det här fallet meddelar vi användaren att data laddas:

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

Om vår hämtning lyckades (vi betecknade det som 'success'), så behöver vi visa listan över erhållna produkter. Vi visar den i map med hjälp av komponenten ProductCard, som vi skickar product som prop till:

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

Och den sista status vi har - det är 'fail'. Vi lägger till den också. Vi använder här variabeln error, som vi ovan skrev felet från state 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>
}

Och som sista steg byter vi i kodblocket för return ut den gamla {dispProducts} mot {content}.

Låt oss starta vår applikation, klicka på 'Products' i menyn. Allt fungerar. Vi ser att i ungefär 2 sekunder (som vi inställt på servern) hänger texten 'Products list loading ...' under formuläret för att lägga till produkt, och sedan visas produktlistan.

Öppna din studentapplikation. Öppna filen StudentsList.jsx i den. Skapa en ny komponent StudentCard i den. Flytta över koden från dispStudents till den, som visas i lektionen.

Skapa variablerna error och content i funktionen StudentsList. Tilldela variabeln content innehåll beroende på förfrågningsstatus. Glöm inte att byta ut den gamla dispStudents mot content i den returnerade JSX-koden.