Thunk siuntimas iš komponento į Redux

Šioje pamokoje mes išsiųsime thunk, norėdami gauti produktus iš React komponento ProductsList.

Dabar atidarykime mūsų produktų aplikaciją, o joje failą ProductsList.jsx. Pirmiausia pridėkime prie importo thunk fetchProducts, kurį mes sukūrėme:

import { selectAllProducts, fetchProducts } from './productsSlice'

Taip pat mums reikės hook'o useDispatch naudojant mūsų action creator ir hook'o useEffect, nes čia mes turime šalutinį efektą, kadangi mes susiduriame su tinklu, o tai jau yra išorinis API:

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

Dabar pirmąją funkcijos eilutę ProductsList prieš products deklaraciją pridėkime:

const dispatch = useDispatch()

Toliau, gaunant produktus iš state mes taip pat išgausime užklausos statusą:

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

Ir iškart po to, naudodami hook'ą useEffect, pasakysime React, kad po komponento atvaizdavimo mums reikia gauti produktus. Čia mums ir pravers užklausos statusas, nes mums svarbu, kad tokia užklausa būtų siunčiama tik vieną kartą:

useEffect(() => {
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

Dabar mes galime paleisti mūsų aplikaciją, joje paspausti 'Products' kairėje esančiame meniu. Produktų sąrašo mes kol kas nematysime, bet jei mes atsidarysime Redux DevTools, tai kairėje lango dalyje pasirodys automatiškai sugeneruoti (kaip ir sakiau praeitoje pamokoje) veiksmai products/fetchProducts/pending ir fulfilled. Dabar spustelėkime action products/fetchProducts/fulfilled ir jo lauką payload - štai mūsų produktų sąrašelis! Valio, visi mūsų grandinės grandys - serveris, duomenų bazė, klientas ir Redux - aplikacija veikia deramai ir kartu. Beje, kaip matote čia yra ir savybė meta, kurioje mes matome užklausos statusą.

Atkreipkime dėmesį į dar vieną dalyką, jums gali atsitikti taip, kad pending ir, atitinkamai, fulfilled bus rodomi du kartus. Jei taip atsitiks, nenusiminkite, mes apie tai pakalbėsime vėliau.

Atidarykite savo studentų aplikaciją. Atidarykite joje failą StudentsList.jsx. Importuokite į jį reikalingus hook'us ir thunk pagal pamokoje pateiktą medžiagą.

Išstudijavę pamokos medžiagą, gaukite užklausos statusą studentStatus, o tada, naudodami useEffect, išsiųskite fetchStudents tik esant sąlygai, kad reikšmė studentStatus - 'idle'.

Paleiskite savo aplikaciją, spustelėkite aplikacijos meniu kairėje 'Students', o tada paleiskite naršyklės plėtinį Redux DevTools, kaip ir šioje pamokoje jūs turėtumėte pamatyti veiksmus su pending ir fulfilled (o jame payload su studentais). Naršykite po plėtinio skirtukus.