Thunk küldése komponensből a Reduxba

Ezen a leckén egy thunk-ot küldünk a termékek lekéréséhez a React-komponensből ProductsList.

Most nyissuk meg a termékalkalmazásunkat, és benne a ProductsList.jsx fájlt. Először is adjuk hozzá az importálandó thunk-ot fetchProducts, amit létrehoztunk:

products/ProductsList.jsximport { selectAllProducts, fetchProducts } from './productsSlice'

Szükségünk lesz a useDispatch hook-ra is a mi action creator-ünk elküldéséhez és a useEffect hook-ra, mert itt mellékhatás van, mivel hálózattal dolgozunk, ami már egy külső API:

products/ProductsList.jsximport { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

Most a függvény kódjának első sorában a ProductsList függvényben, a products deklarálása előtt adjuk hozzá:

products/ProductsList.jsxconst dispatch = useDispatch()

Ezután, amikor a termékeket lekérjük az állapotból, ki fogjuk nyerni a kérés állapotát is:

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

És rögtön ezután megmondjuk a Reactnak a useEffect hook segítségével, hogy a komponens renderelése után le kell kérnünk a termékeket. Itt lesz szükségünk a kérés állapotára, hiszen fontos, hogy egy ilyen kérés csak egyszer kerüljön kiküldésre:

products/ProductsList.jsxuseEffect(() => {
  if (productStatus === 'idle') {
    dispatch(fetchProducts())
  }
}, [productStatus, dispatch])

Most elindíthatjuk az alkalmazásunkat, rákattintva a bal oldali menüben a 'Products' elemre. A terméklistát egyelőre nem fogjuk látni, de ha belépünk a Redux DevTools-ba, akkor a bal oldali ablakrészben megjelennek az automatikusan generált (ahogyan azt az előző leckében mondtam) akciók products/fetchProducts/pending és fulfilled. Most kattintsunk az products/fetchProducts/fulfilled akcióra és annak payload mezőjére - itt van a mi terméklistánk! Húha, minden láncszemünk - a szerver, az adatbázis, a kliens és a Redux - alkalmazás összhangban és együttműködve dolgozik. Egyébint, amint látjatok itt van még egy meta tulajdonság is, amiben a kérés állapotát látjuk.

Figyeljünk még egy dologra, előfordulhat, hogy a pending és, következésképpen a fulfilled két alkalommal jelenik meg. Ha ez történik, akkor ne csüggedj, erről később beszélünk.