Коришћење статуса захтева у 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.