Отправка thunk из компонента в Redux

На этом уроке мы отправим thunk для получения продуктов из из React-компонента ProductsList.

Давайте теперь откроем наше приложение с продуктами, а в нем файл ProductsList.jsx. Для начала добавим к импорту thunk fetchProducts, который мы создали:

products/ProductsList.jsximport { selectAllProducts, fetchProducts } from './productsSlice'

Также нам понадобится хук useDispatch для отправки нашего action creator и хук useEffect потому что здесь у нас побочный эффект, поскольку мы имеем дело с сеткой, а это уже внешний API:

products/ProductsList.jsximport { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

Теперь первой строчкой в коде функции ProductsList перед объявлением products добавим:

products/ProductsList.jsxconst dispatch = useDispatch()

Далее при получении продуктов из стейта мы еще будем извлекать статус запроса:

products/ProductsList.jsxconst products = useSelector(selectAllProducts)
const productStatus = useSelector((state) => state.products.status)

И сразу после этого скажем React при помощи хука useEffect, что нам после отрисовки компонента необходимо получить продукты. Здесь нам и понадобится статус запроса, ведь нам важно, чтобы такой запрос отправлялся только один раз:

products/ProductsList.jsxuseEffect(() => {
  if (productStatus === 'idle') {
    dispatch(fetchProducts())
  }
}, [productStatus, dispatch])

Сейчас мы можем запустить наше приложение, кликнуть в нем по 'Products' в меню слева. Список продуктов мы пока не увидим, но если мы зайдем в наш Redux DevTools, то в левой части окошечка у нас появятся сгенерированные автоматически (как я и говорил в прошлом уроке) экшены products/fetchProducts/pending и fulfilled. Теперь давайте кликнем по action products/fetchProducts/fulfilled и по его полю payload - вот и наш списочек продуктов! Ура, все наши звенья в цепочке - сервер, база, клиент и Redux - приложение работают слаженно и сообща. Кстати, как видите здесь еще есть свойство meta, в котором мы видим статус запроса.

Обратим внимание на еще одну вещь, у вас может случиться так, что pending и, следовательно, fulfilled будут отображаться по два раза. Если это так, то не огорчайтесь, мы поговорим об этом позже.