Odoslanie thunku z komponentu v Reduxe

Na tejto lekcii odošleme thunk na získanie produktov z React komponentu ProductsList.

Teraz otvorme našu aplikáciu s produktmi a v nej súbor ProductsList.jsx. Na začiatok pridajme k importu thunk fetchProducts, ktorý sme vytvorili:

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

Tiež budeme potrebovať hook useDispatch na odoslanie nášho action creator a hook useEffect pretože tu máme vedľajší efekt, keďže pracujeme so sieťou, a to je už externé API:

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

Teraz prvým riadkom v kóde funkcie ProductsList pred deklaráciou products pridajme:

const dispatch = useDispatch()

Ďalej pri získavaní produktov zo stavu budeme extrahovať aj stav požiadavky:

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

A hneď na to povedzme React pomocou hooku useEffect, že po vykreslení komponentu potrebujeme získať produkty. Tu sa nám bude hodiť stav požiadavky, pretože je dôležité, aby sa takáto požiadavka odoslala iba raz:

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

Teraz môžeme spustiť našu aplikáciu, kliknúť v nej na 'Products' v menu vľavo. Zoznam produktov zatiaľ neuvidíme, ale ak prejdeme do nášho Redux DevTools, tak v ľavej časti okienka sa nám objavia automaticky vygenerované (ako som povedal v minulej lekcii) akcie products/fetchProducts/pending a fulfilled. Teraz kliknime na action products/fetchProducts/fulfilled a na jeho pole payload - tu je náš zoznam produktov! Hurá, všetky naše články v reťazci - server, databáza, klient a Redux - aplikácia fungujú súhlasne a spoločne. Mimochodom, ako vidíte tu je ešte vlastnosť meta, v ktorej vidíme stav požiadavky.

Všimnime si ešte jednu vec, môže sa vám stať, že pending a, preto fulfilled sa budú zobrazovať dva krát. Ak je to tak, tak sa nehnevajte, porozprávame sa o tom neskôr.

Otvorte vašu aplikáciu so študentmi. Otvorte v nej súbor StudentsList.jsx. Importujte do neho potrebné hooky a thunk podľa materiálu z lekcie.

Naštudovaním materiálov z lekcie získajte stav požiadavky studentStatus, a potom, použitím useEffect, odošlite fetchStudents iba za podmienky, že hodnota studentStatus je 'idle'.

Spustite vašu aplikáciu, kliknite v menu aplikácie vľavo na 'Students', a potom spustite v prehliadači rozšírenie Redux DevTools, ako aj v tejto lekcii by ste mali vidieť akcie s pending a fulfilled (a v ňom payload so študentmi). Prezrite si záložky rozšírenia.