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:

products/ProductsList.jsxconst 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:

products/ProductsList.jsxconst 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:

products/ProductsList.jsxconst 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):

products/ProductsList.jsxconst 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:

products/ProductsList.jsxif (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:

products/ProductsList.jsxif (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:

products/ProductsList.jsxif (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ů.