Použití stavu požadavku v Reduxu

Na minulých lekcích jsme pomocí dodatečných reducerů popsali, co má naše aplikace dělat, pokud fetchProducts odešle při požadavku akce pending, fulfilled a rejected. Nyní můžeme uživateli ukázat, v jaké fázi se právě nachází načítání dat.

Pojďme otevřít naši aplikaci s produkty a v ní soubor ProductsList.jsx. První, co uděláme, je vytvoření samostatné komponenty pro kartu produktu ProductCard. Uděláme to hned za řádky importů před funkcí ProductsList. Jako props mu předáme product:

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

A nyní do prázdných kulatých závorek return přeneseme celý kód pro zobrazení dat 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 odstraníme v ProductsList zbývající řádek kódu. Už ho nepotřebujeme:

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

A nyní na začátku kódu funkce ProductsList zavedeme ještě pár proměnných, error a content. První bude pro chybu, do druhé budeme zapisovat to či ono obsah v závislosti na stavu požadavku. Uděláme to před const dataFetch = useRef(false):

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

Nyní před příkazem return komponenty ProductsList napíšeme blok kódu s podmínkami, za kterých se do content bude zapisovat to či ono obsah v závislosti na stavu. Jako první popíšeme stav 'in progress' - když je náš požadavek odeslán. V tomto případě sdělíme uživateli, že probíhá načítání dat:

if (productStatus === 'in progress') {
	content = <p>Načítání seznamu produktů ...</p>
}

Pokud naše načítání proběhlo úspěšně (označovali jsme to jako 'success'), pak potřebujeme vypsat seznam získaných produktů. Vypíšeme jej v map pomocí komponenty ProductCard, které předáme propsem product:

if (productStatus === 'in progress') {
	content = <p>Načítání seznamu produktů ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

A poslední stav, který máme k dispozici - to je 'fail'. Přidáme i ten. Použijeme zde proměnnou error, do které jsme výše zapsali chybu ze stavu:

if (productStatus === 'in progress') {
	content = <p>Načítání seznamu produktů ...</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 krokem v bloku kódu pro return nahradíme starý {dispProducts} na {content}.

Spustíme naši aplikaci, klikneme v menu na 'Products'. Vše funguje. Vidíme, že přibližně 2 sekundy (jak jsme nastavili na serveru) se pod formulářem přidání produktu zobrazuje nápis 'Načítání seznamu produktů ...', a poté se objeví seznam produktů.

Otevřete vaši aplikaci se studenty. Otevřete v ní soubor StudentsList.jsx. Vytvořte v ní novou komponentu StudentCard. Přenejte do ní kód z dispStudents, jak je ukázáno v lekci.

Vytvořte ve funkci StudentsList proměnné error a content. Přiřaďte proměnné content obsah v závislosti na stavu požadavku. Ne zapomeňte nahradit ve vráceném kódu starý dispStudents na content.