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:

products/ProductsList.jsxconst ProductCard = ({ product }) => {
  return ()
}

A teraz do prázdnych okrúhlych zátvoriek return presunieme celý kód pre zobrazenie údajov 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 odstránime v ProductsList zostávajúci riadok kódu. Ten už nepotrebujeme:

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

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

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

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

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