Користење на статусот на барањето во Redux

На претходните часови ние со помош на дополнителни редуцери опишавме што треба да прави нашата апликација, ако fetchProducts испраќа при барањето акции pending, fulfilled и rejected. Сега можеме да му ја прикажеме на корисникот на која фаза се моментално преземањето на податоците.

Ајде да ја отвориме нашата апликација со производи, а во неа датотеката ProductsList.jsx. Првото нешто што ќе го направиме е да создадеме посебен компонент за картичката на производот ProductCard. Ќе го направиме ова веднаш по линиите за импорт пред функцијата ProductsList. Како пропс ќе му го пренесеме product:

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

А сега во празните заградни return ќе го пренесеме целиот код за прикажување на податоците за производот од 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>
	)
}

И ќе ја отстраниме во ProductsList преостанатата линија код. Таа веќе не ни треба:

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

А сега на почетокот на кодот на функцијата ProductsList ќе дефинираме уште неколку променливи, error и content. Првата ќе биде за грешка, во втората ќе запишуваме различна содржина во зависност од статусот на барањето. Ќе го направиме ова пред const dataFetch = useRef(false):

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

Сега пред командата return на компонентот ProductsList ќе напишеме блок код со услови, при кои во content ќе се внесува различна содржина во зависност од статусот. Прво ќе го опишеме статусот 'in progress' - кога нашето барање е испратено. Во овој случај ќе му известиме на корисникот дека се вчитуваат податоците:

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
}

Ако нашето вчитување помина успешно (ние го означивме ова како 'success'), тогаш треба да го прикажеме листата на добиени производи. Ќе го прикажеме во map со помош на компонентот ProductCard, на кој како пропс ќе му го пренесеме product:

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

И последниот статус што го имаме - ова е 'fail'. Ќе го додадеме и него. Ќе ја искористиме овде променливата error, во која погоре ја запишавме грешката од состојбата:

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

И како последен чекор ние во блокот код за return ќе го замениме стариот {dispProducts} со {content}.

Ќе ја пуштиме нашата апликација, ќе кликнеме во менито на 'Products'. Сè работи. Гледаме, deка околу 2 секунди (како што го поставивме на серверот) под формата за додавање производ виси натписот 'Products list loading ...', a потоа се појавува листата на производи.

Отворете ја вашата апликација со студенти. Отворете ја во неа датотеката StudentsList.jsx. Создадете во неа нов компонент StudentCard. Пренесете го во него кодот од dispStudents, како што е прикажано на лекцијата.

Создадете во функцијата StudentsList променливите error и content. Доделете им на променливата content содржина во зависност од статусот на барањето. Не заборавајте да го замените во вратената верстка стариот dispStudents со content.