Адпраўка 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 будуць адлюстроўвацца па два разы. Калі гэта так, то не засмучайцеся, мы пагаворым пра гэта пазней.