Použitie stavu požiadavky v Reduxe

Na predchádzajúcich hodinách sme pomocou dodatočných reduktorov opísali, čo má naša aplikácia robiť, ak fetchProducts pošle pri požiadavke akcie pending, fulfilled a rejected. Teraz môžeme zobraziť používateľovi, v akej fáze je aktuálne sťahovanie údajov.

Otvorme našu aplikáciu s produktmi a v nej súbor ProductsList.jsx. Prvou vecou, ktorú urobíme, je vytvorenie samostatného komponentu pre kartu produktu ProductCard. Urobíme to hneď po riadkoch importu pred funkciou ProductsList. Ako prop mu odovzdáme product:

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

A teraz do prázdnych okrúhlych zátvoriek return presunieme celý kód pre zobrazenie údajov produktu z 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>
	)
}

A odstránime v ProductsList zostávajúci riadok kódu. Ten už nepotrebujeme:

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

A teraz na začiatku kódu funkcie ProductsList zavedieme ešte pár premenných, error a content. Prvá bude pre chybu, do druhej budeme zapisovať rôzny obsah v závislosti od stavu požiadavky. Urobíme to pred const dataFetch = useRef(false):

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

Teraz pred príkazom return komponentu ProductsList napíšeme blok kódu s podmienkami, pri ktorých sa do content bude zapísať rôzny obsah v závislosti od stavu. Prvý opíšeme stav 'in progress' - keď je naša požiadavka odoslaná. V tomto prípade oznámime používateľovi, že prebieha sťahovanie údajov:

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

Ak naše sťahovanie prebehlo úspešne (označili sme to ako 'success'), potom musíme zobraziť zoznam získaných produktov. Zobrazíme ho v map pomocou komponentu ProductCard, ktorému propom odovzdáme 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} />
	))
}

A posledný stav, ktorý máme - to je 'fail'. Pridajme aj ten. Použijeme tu premennú error, do ktorej sme vyššie zapísali chybu zo stavu:

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

A posledným krokom v bloku kódu pre return nahradíme starý {dispProducts} na {content}.

Spustíme našu aplikáciu, klikneme v menu na 'Products'. Všetko funguje. Vidíme, že približne 2 sekundy (ako sme nastavili na serveri) máme pod formulárom pridania produktu správu 'Products list loading ...', a potom sa objaví zoznam produktov.

Otvorte vašu aplikáciu so študentmi. Otvorte v nej súbor StudentsList.jsx. Vytvorte v ňom nový komponent StudentCard. Presuňte do neho kód z dispStudents, ako je ukázané v lekcii.

Vytvorte vo funkcii StudentsList premenné error a content. Priraďte premennej content obsah v závislosti od stavu požiadavky. Ne zabudnite nahradiť vo vracanej verzii starý dispStudents na content.