# Применение статуса запроса в 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`.

← →
↑