Ужыванне статусу запыту ў 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'. Усё працуе. Бачым, што прыблізна 2 секунды (як мы і ўсталявалі на серверы) у нас пад формай дадання прадукту вісіць надпіс 'Products list loading ...', а потым з'яўляецца спіс прадуктаў.

Адкрыйце ваш дадатак з студэнтамі. Адкрыйце ў ім файл StudentsList.jsx. Стварыце ў ім новы кампанент StudentCard. Перанясіце ў яго код з dispStudents, як паказана ў уроку.

Стварыце ў функцыі StudentsList зменныя error і content. Прысвойце зменнай content змесціва ў залежнасці ад статусу запыту. Не забудзьце замяніць у якая вяртаецца вёрстцы стары dispStudents на content.