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:

import { 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:

import { 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á:

const dispatch = useDispatch()

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

const 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:

useEffect(() => {
	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.

Nyisd meg a diák alkalmazásodat. Nyisd meg benne a StudentsList.jsx fájlt. Importáld bele a szükséges hook-okat és thunk-ot a lecke anyaga szerint.

A lecke anyagának tanulmányozása után kérdezd le a kérés állapotát studentStatus, majd a useEffect használatával küldd el a fetchStudents thunk-ot csak akkor, ha a studentStatus értéke 'idle'.

Indítsd el az alkalmazásodat, kattints a bal oldali menüben a 'Students' elemre, majd indítsd el a böngészőben a Redux DevTools kiegészítőt, ahogyan ebben a leckében is látnod kell a pending és fulfilled akciókat (és benne a payload-t a diákokkal). Böngéssz a kiegészítő lapjai között.