Отправка thunk из компонента в Redux
На этом уроке мы отправим thunk для получения
продуктов из из React-компонента ProductsList.
Давайте теперь откроем наше приложение с
продуктами, а в нем файл ProductsList.jsx.
Для начала добавим к импорту thunk fetchProducts,
который мы создали:
import { selectAllProducts, fetchProducts } from './productsSlice'
Также нам понадобится хук useDispatch
для отправки нашего action creator
и хук useEffect потому что здесь у нас
'побочный эффект',
поскольку мы имеем дело с сеткой, а это
уже внешний API:
import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
Теперь первой строчкой в коде функции
ProductsList перед объявлением
products добавим:
const dispatch = useDispatch()
Далее при получении продуктов из стейта мы еще будем извлекать статус запроса:
const products = useSelector(selectAllProducts)
const productStatus = useSelector((state) => state.products.status)
И сразу после этого скажем React
при помощи хука useEffect,
что нам после отрисовки компонента
необходимо получить продукты. Здесь
нам и понадобится статус запроса, ведь
нам важно, чтобы такой запрос отправлялся
только один раз:
useEffect(() => {
if (productStatus === 'idle') {
dispatch(fetchProducts())
}
}, [productStatus, dispatch])
Сейчас мы можем запустить наше приложение,
кликнуть в нем по 'Products' в меню слева.
Список продуктов мы пока не увидим, но если
мы зайдем в наш Redux DevTools, то в левой
части окошечка у нас появятся сгенерированные
автоматически (как я и говорил в прошлом уроке)
экшены products/fetchProducts/pending и
fulfilled. Теперь давайте кликнем по action
products/fetchProducts/fulfilled и по его полю
payload - вот и наш списочек продуктов! Ура,
все наши звенья в цепочке - сервер, база, клиент
и Redux - приложение работают слаженно и сообща.
Кстати, как видите здесь еще есть свойство meta,
в котором мы видим статус запроса.
Обратим внимание на еще одну вещь, у вас
может случиться так, что pending и,
следовательно, fulfilled будут
отображаться по два раза. Если это так,
то не огорчайтесь, мы поговорим об этом
позже.
Откройте ваше приложение со студентами.
Откройте в нем файл StudentsList.jsx.
Импортируйте в него необходимые хуки и
thunk согласно материалу из урока.
Изучив материалы урока, получите
статус запроса studentStatus, а затем,
используя useEffect, отправьте
fetchStudents только при условии, что
значение studentStatus - 'idle'.
Запустите ваше приложение, кликните
в меню приложения слева по 'Students',
а затем запустите в браузере расширение
Redux DevTools, как и в данном уроке
вы должны увидеть экшены с pending
и fulfilled (а в нем payload со
студентами). Полазьте по вкладкам расширения.