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:

const 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:

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

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

const 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é:

const 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:

if (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:

if (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:

if (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.

Nyissa meg a diákjairól szóló alkalmazását. Nyissa meg benne a StudentsList.jsx fájlt. Készítsen benne egy új StudentCard komponenst. Helyezze át bele a dispStudents-ból a kódot, ahogyan az az órán is bemutatásra került.

Hozzon létre a StudentsList függvényben error és content változókat. Rendelje a content változóhoz a tartalmat a lekérdezés állapotától függően. Ne felejtse el lecserélni a visszaadott kódban a régi dispStudents-t content-ra.