Odesílání thunk z komponenty v Reduxu

V této lekci odešleme thunk pro načtení produktů z React komponenty ProductsList.

Nyní otevřeme naši aplikaci s produkty a v ní soubor ProductsList.jsx. Nejprve přidejme k importu thunk fetchProducts, který jsme vytvořili:

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

Také budeme potřebovat hook useDispatch pro odeslání našeho action creatoru a hook useEffect, protože zde máme vedlejší efekt, protože pracujeme se sítí, což je externí API:

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

Nyní na prvním řádku v kódu funkce ProductsList před deklarací products přidejme:

const dispatch = useDispatch()

Dále při získávání produktů ze stavu budeme také extrahovat stav požadavku:

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

A ihned potom řekneme Reactu pomocí hooku useEffect, že po vykreslení komponenty je třeba načíst produkty. Zde se nám bude hodit stav požadavku, protože je důležité, aby byl takový požadavek odeslán pouze jednou:

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

Nyní můžeme spustit naši aplikaci, kliknout na 'Products' v menu vlevo. Seznam produktů zatím neuvidíme, ale pokud půjdeme do našich Redux DevTools, v levé části okna se nám objeví automaticky generované (jak jsem říkal v minulé lekci) akce products/fetchProducts/pending a fulfilled. Nyní klikněme na akci products/fetchProducts/fulfilled a na její pole payload - a tady je náš seznam produktů! Hurá, všechny naše články řetězce - server, databáze, klient a Redux - aplikace pracují sladěně a společně. Mimochodem, jak zde vidíte, je tu také vlastnost meta, ve které vidíme stav požadavku.

Všimněme si ještě jedné věci, může se stát, že se pending a následně fulfilled budou zobrazovat dvakrát. Pokud tomu tak je, netrapte se, promluvíme si o tom později.

Otevřete vaši aplikaci se studenty. Otevřete v ní soubor StudentsList.jsx. Importujte do ní potřebné hooky a thunk podle látky z lekce.

Po prostudování materiálu z lekce získejte stav požadavku studentStatus a poté, pomocí useEffect, odešlete fetchStudents pouze za podmínky, že hodnota studentStatus je 'idle'.

Spusťte vaši aplikaci, klikněte v menu aplikace vlevo na 'Students', a poté spusťte v prohlížeči rozšíření Redux DevTools, stejně jako v této lekci byste měli vidět akce s pending a fulfilled (a v něm payload se studenty). Prozkoumejte záložky rozšíření.