Päringu oleku rakendamine Reduxis

Eelmistel tundidel kirjeldasime lisareduktorite abil, mida meie rakendus peab tegema, kui fetchProducts saadab päringu ajal actionid pending, fulfilled ja rejected. Nüüd saame kasutajale näidata, millises etapis andmete laadimine praegu on.

Avame oma tooterakenduse ja selles faili ProductsList.jsx. Esimese asjana loome eraldi komponendi tootekaardi jaoks ProductCard. Teeme seda kohe impordireade järel enne funktsiooni ProductsList. Edastame sellele propsina product:

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

Ja nüüd kanname tühjadesse ümarsulgudesse return kõik tooteandmete kuvamise koodi dispProducts-st:

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

Ja eemaldame ProductsList-st allesjäänud koodirea. See pole meil enam vajalik:

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

Ja nüüd funktsiooni ProductsList koodi alguses loome veel paar muutujat, error ja content. Esimene on meil vea jaoks, teise salvestame erineva sisu sõltuvalt päringu olekust. Teeme seda enne const dataFetch = useRef(false):

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

Nüüd enne komponendi ProductsList käsku return kirjutame koodibloki tingimustega, mille korral content-i sisestatakse erinev sisu sõltuvalt olekust. Esimesena kirjeldame oleku 'in progress' - kui meie päring on saadetud. Sel juhul teavitame kasutajat, et andmeid laaditakse:

if (productStatus === 'in progress') {
	content = <p>Toodete nimekiri laeb ...</p>
}

Kui meie laadimine õnnestus (me tähistasime seda kui 'success'), siis peame kuvama saadud toodete nimekirja. Kuvame selle map-iga, kasutades komponenti ProductCard, millele edastame propsina product:

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

Ja viimane olek, mis meil on - see on 'fail'. Lisame ka selle. Kasutame siin muutujat error, kuhu me ülal kirjutasime vea staatist:

if (productStatus === 'in progress') {
	content = <p>Toodete nimekiri laeb ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

Ja viimase sammuna asendame return-i koodiblokis vana {dispProducts} asemel {content}.

Käivitame oma rakenduse, klõpsame menüüs 'Products' peal. Kõik töötab. Näeme, et umbes 2 sekundit (nagu me serveris seadsime) ripub meil toote lisamise vormi all silt 'Toodete nimekiri laeb ...', ja siis ilmub toodete nimekiri.

Avage oma õpilaste rakendus. Avage selles fail StudentsList.jsx. Looge selles uus komponent StudentCard. Kandke sinna kood dispStudents-st, nagu tunnis näidatud.

Looge funktsioonis StudentsList muutujad error ja content. Määrake muutujale content sisu sõltuvalt päringu olekust. Ärge unustage asendada tagastatavas visuaalis vana dispStudents asemel content-iga.