Utilizarea stării cererii în Redux

În lecțiile anterioare, cu ajutorul unor reductori suplimentari am descris ce să facă aplicația noastră dacă fetchProducts trimite în timpul cererii acțiunile pending, fulfilled și rejected. Acum putem afișa utilizatorului în ce etapă se află acum încărcarea datelor.

Să deschidem aplicația noastră cu produse, iar în ea fișierul ProductsList.jsx. Primul lucru pe care îl vom face este să creăm un component separat pentru cardul produsului ProductCard. Vom face acest lucru imediat după liniile de import înainte de funcția ProductsList. Îi vom transmite ca props product:

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

Și acum în parantezele rotunde goale return vom muta tot codul pentru afișarea datelor produsului din 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 vom elimina în ProductsList linia rămasă de cod. Nu mai avem nevoie de ea:

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

Și acum la începutul codului funcției ProductsList vom crea încă câteva variabile, error și content. Prima va fi pentru eroare, în a doua vom scrie un conținut sau altul în funcție de starea cererii. Vom face acest lucru înainte de const dataFetch = useRef(false):

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

Acum înainte de comanda return a componentei ProductsList vom scrie un bloc de cod cu condiții, în care în content va fi introdus un conținut sau altul în funcție de stare. Primul vom descrie starea 'in progress' - când cererea noastră este trimisă. În acest caz îi vom comunica utilizatorului că se încarcă datele:

if (productStatus === 'in progress') {
	content = <p>Se încarcă lista de produse ...</p>
}

Dacă încărcarea noastră a avut succes (am notat acest lucru ca 'success'), atunci trebuie să afișăm lista produselor obținute. O vom afișa în map cu ajutorul componentei ProductCard, căruia îi vom transmite ca props product:

if (productStatus === 'in progress') {
	content = <p>Se încarcă lista de produse ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

Și ultima stare pe care o avem - aceasta este 'fail'. Să o adăugăm și pe ea. Vom folosi aici variabila error, în care am scris mai sus eroarea din starea aplicației:

if (productStatus === 'in progress') {
	content = <p>Se încarcă lista de produse ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

Și ultimul pas, în blocul de cod pentru return vom înlocui vechiul {dispProducts} cu {content}.

Să pornim aplicația noastră, să facem clic în meniu pe 'Products'. Totul funcționează. Vedem că aproximativ 2 secunde (cum am stabilit și pe server) sub formularul de adăugare a produsului avem mesajul 'Se încarcă lista de produse ...', iar apoi apare lista de produse.

Deschideți aplicația voastră cu studenți. Deschideți în ea fișierul StudentsList.jsx. Creați în el un nou component StudentCard. Mută în el codul din dispStudents, așa cum este arătat în lecție.

Creați în funcția StudentsList variabilele error și content. Atribuiți variabilei content conținutul în funcție de starea cererii. Nu uitați să înlocuiți în markup-ul returnat vechiul dispStudents cu content.