Адпраўка 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 са студэнтамі). палазьце па ўкладках пашырэння.