Uporaba statusa zahteve v Redux

V prejšnjih urah smo z dodatnimi reducerji opisali, kaj naj stori naša aplikacija, če fetchProducts pošlje ob zahtevi akcije pending, fulfilled in rejected. Zdaj lahko uporabniku pokažemo, na kateri stopnji je trenutno nalaganje podatkov.

Odprimo našo aplikacijo s produkti in v njej datoteko ProductsList.jsx. Prva stvar, ki jo bomo naredili, je ustvarjanje ločene komponente za kartico produkta ProductCard. To naredimo takoj za vrsticami uvozov pred funkcijo ProductsList. Kot props mu posredujemo product:

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

In zdaj v prazne okrogle oklepaje return prenesemo vso kodo za prikaz podatkov produkta iz 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>
	)
}

In v ProductsList odstranimo preostalo vrstico kode. Ni nam več potrebna:

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

In zdaj na začetku kode funkcije ProductsList ustvarimo še nekaj spremenljivk, error in content. Prva bo za napako, v drugo bomo zapisovali to ali drugo vsebino glede na status zahteve. Naredimo to pred const dataFetch = useRef(false):

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

Zdaj pred ukazom return komponente ProductsList napišimo blok kode s pogoji, pri katerih se bo v content zapisovala ta ali druga vsebina glede na status. Prvi opišemo status 'in progress' - ko je naša zahteva poslana. V tem primeru sporočimo uporabniku, da poteka nalaganje podatkov:

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

Če je naše nalaganje uspešno (smo to označili kot 'success'), potem moramo izpisati seznam prejetih produktov. Izpišimo ga z map s pomočjo komponente ProductCard, ki ji podamo props product:

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

In zadnji status, ki ga imamo - to je 'fail'. Dodajmo še tega. Uporabimo tukaj spremenljivko error, v katero smo zgoraj zapisali napako iz stanja:

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

In zadnji korak je, da v bloku kode za return zamenjamo stari {dispProducts} z {content}.

Zaženimo našo aplikacijo, kliknimo v meniju na 'Products'. Vse deluje. Vidimo, da približno 2 sekund (kot smo nastavili na strežniku) se nam pod obrazcem dodajanja produkta prikaže napis 'Products list loading ...', nato pa se prikaže seznam produktov.

Odprite vašo aplikacijo s študenti. Odprite v njej datoteko StudentsList.jsx. Ustvarite v njej novo komponento StudentCard. Prenesite vanjo kodo iz dispStudents, kot je prikazano v lekciji.

Ustvarite v funkciji StudentsList spremenljivki error in content. Dodelite spremenljivki content vsebino glede na status zahteve. Ne pozabite zamenjati v vračani kodi stari dispStudents z content.