A lekérdezés állapotának használata a Redux-ban

Az előző órákon további reducerekkel írtuk le, hogy mit tegyen az alkalmazásunk, ha a fetchProducts a lekérdezés során pending, fulfilled és rejected actionöket küld. Most már megmutathatjuk a felhasználónak, melyik szakaszban jár jelenleg az adatok betöltése.

Nyissuk meg a termékeink alkalmazását, és benne a ProductsList.jsx fájlt. Első lépésként készítünk egy külön komponenst a termékkártyához, a ProductCard-ot. Ezt az import sorok után, a ProductsList függvény előtt tegyük meg. Prop-ként adjuk át neki a product-ot:

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

Most a return üres kerek zárójeleibe helyezzük át a termék adatainak megjelenítéséhez szükséges kódot a dispProducts-ból:

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

És távolítsuk el a ProductsList-ból a megmaradt kódsort. Már nincs rá szükségünk:

products/ProductsList.jsxconst dispProducts = products.map((product) => ())

Most a ProductsList függvény kódjának elején hozzunk létre még pár változót, error és content. Az első a hiba számára lesz, a másodikba a lekérdezés állapotától függően írunk be különböző tartalmakat. Tegyük ezt a const dataFetch = useRef(false) elé:

products/ProductsList.jsxconst error = useSelector((state) => state.products.error)
let content

Most a ProductsList komponens return parancsa előtt írjunk egy kódblokkot feltételekkel, amelyek alapján a content-ba különböző tartalom kerül, az állapottól függően. Először a 'in progress' állapotot írjuk le - amikor a lekérdezésünk el lett küldve. Ebben az esetben értesítjük a felhasználót, hogy az adatok betöltése folyamatban van:

products/ProductsList.jsxif (productStatus === 'in progress') {
  content = <p>Terméklista betöltése ...</p>
}

Ha a betöltésünk sikeres volt (ezt 'success'-ként jelöltük), akkor ki kell írnunk a kapott termékek listáját. Jelenítsük meg a map-ben a ProductCard komponens segítségével, amelynek prop-ként átadjuk a product-ot:

products/ProductsList.jsxif (productStatus === 'in progress') {
  content = <p>Terméklista betöltése ...</p>
} else if (productStatus === 'success') {
  content = products.map((product) => (
    <ProductCard key={product.id} product={product} />
  ))
}

És az utolsó állapot, ami rendelkezésünkre áll - ez a 'fail'. Adjuk hozzá ezt is. Itt használjuk a error változót, amibe feljebb beírtuk a státuszból származó hibát:

products/ProductsList.jsxif (productStatus === 'in progress') {
  content = <p>Terméklista betöltése ...</p>
} else if (productStatus === 'success') {
  content = products.map((product) => (
    <ProductCard key={product.id} product={product} />
  ))
} else if (productStatus === 'fail') {
  content = <div>{error}</div>
}

És utolsó lépésként a return kódblokkjában cseréljük le a régi {dispProducts}-t {content}-ra.

Indítsuk el az alkalmazásunkat, kattintsunk a menüben a 'Products'-ra. Minden működik. Látjuk, hogy körülbelül 2 másodpercig (ahogy a szerveren beállítottuk) a termék hozzáadására szolgáló űrlap alatt a 'Terméklista betöltése ...' felirat jelenik meg, majd megjelenik a termékek listája.