Primena statusa zahteva u Redux-u

Na prethodnim časovima smo uz pomoć dodatnih reduser-a opisali šta da radi naša aplikacija, ako fetchProducts šalje pri zahtevu akcije pending, fulfilled i rejected. Sada možemo da pokažemo korisniku na kojoj je fazi trenutno učitavanje podataka.

Hajde da otvorimo našu aplikaciju sa proizvodima, a u njoj fajl ProductsList.jsx. Prvo šta ćemo uraditi jeste da napravimo poseban komponent za karticu proizvoda ProductCard. Uradimo to odmah nakon linija import-a pre funkcije ProductsList. Kao pros prosledićemo mu product:

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

A sada u prazne okrugle zagrade return prenesimo ceo kod za prikazivanje podataka proizvoda iz 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>
	)
}

I uklonimo u ProductsList preostalu liniju koda. Ona nam više nije potrebna:

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

A sada na početku koda funkcije ProductsList napišimo još par promenljivih, error i content. Prva će nam biti za grešku, u drugu ćemo upisivati ono ili ovo sadržaje u zavisnosti od statusa zahteva. Uradimo to pre const dataFetch = useRef(false):

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

Sada pre komande return komponenta ProductsList napišimo blok koda sa uslovima, pri kojima će u content biti upisivano ono ili ovo sadržaj u zavisnosti od statusa. Prvi ćemo opisati status 'in progress' - kada je naš zahtev poslat. U ovom slučaju obavestićemo korisnika, da se podaci učitavaju:

if (productStatus === 'in progress') {
	content = <p>Lista proizvoda se učitava ...</p>
}

Ako se naše učitavanje izvršilo uspešno (označavali smo ovo kao 'success'), onda nam treba da prikažemo listu dobijenih proizvoda. Prikažimo ga u map uz pomoć komponenta ProductCard, kojemu pros prosledimo product:

if (productStatus === 'in progress') {
	content = <p>Lista proizvoda se učitava ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

I poslednji status, koji mi imamo - to je 'fail'. Dodajmo i njega. Koristimo ovde promenljivu error, u koju smo gore upisali grešku iz state-a:

if (productStatus === 'in progress') {
	content = <p>Lista proizvoda se učitava ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

I poslednjim korakom mi u bloku koda za return zamenimo stari {dispProducts} sa {content}.

Pokrenimo našu aplikaciju, kliknimo u meniju na 'Products'. Sve radi. Vidimo, da otprilike 2 sekundi (kao što smo i podesili na serveru) kod nas ispod forme dodavanja proizvoda visi natpis 'Products list loading ...', a onda se pojavi lista proizvoda.

Otvorite vašu aplikaciju sa studentima. Otvorite u njoj fajl StudentsList.jsx. Napravite u njemu novi komponent StudentCard. Prenesite u njega kod iz dispStudents, kao što je prikazano na času.

Napravite u funkciji StudentsList promenljive error i content. Dodelite promenljivoj content sadržaj u zavisnosti od statusa zahteva. Ne zaboravite da zamenite u vraćenoj strukturi stari dispStudents sa content.