Komponentdən Redux-a thunk göndərilməsi

Bu dərsdə biz React-komponenti ProductsList-dən məhsulları əldə etmək üçün thunk göndərəcəyik.

İndi gəlin məhsul tətbiqimizi açaq və onun içində ProductsList.jsx faylını açaq. Əvvəlcə yaratdığımız fetchProducts thunk-ini import-a əlavə edək:

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

Həmçinin bizə action creator-ımızı göndərmək üçün useDispatch hook-a və useEffect hook-a ehtiyacımız olacaq, çünki burada bizim yan effektimiz var, çünki biz şəbəkə ilə işləyirik və bu artıq xarici API-dir:

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

İndi ProductsList funksiyasının kodunda products təyinindən əvvəl birinci sətir kimi əlavə edək:

const dispatch = useDispatch()

Sonra, state-dən məhsulları əldə edərkən biz sorğunun statusunu da çıxaracağıq:

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

Və dərhal bundan sonra useEffect hook-u vasitəsilə React-a deyək ki, komponent render olunduqdan sonra məhsulları əldə etməliyik. Burada bizə sorğunun statusu lazımdır, çünki bizim üçün vacibdir ki, belə bir sorğu yalnız bir dəfə göndərilsin:

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

İndi biz tətbiqimizi işə sala bilərik, onun sol menyusunda 'Products'-a klikləyə bilərik. Biz hələlik məhsul siyahısını görməyəcəyik, amma əgər biz Redux DevTools-a getsək, sol pəncərəcikdə avtomatik yaradılmış (keçən dərsdə dediyim kimi) action-lar products/fetchProducts/pending və fulfilled görünəcək. İndi gəlin products/fetchProducts/fulfilled action-una və onun payload sahəsinə klik edək - budur bizim məhsul siyahımız! Ura, zəncirimizdəki bütün halqalar - server, verilənlər bazası, klient və Redux - tətbiqi uyğun və birgə işləyir. Yeri gəlmişkən, görürsüz burada meta xüsusiyyəti də var, onda biz sorğunun statusunu görürük.

Başqa bir şeyə də diqqət edək, sizdə ola bilər ki, pending və nəticədə fulfilled iki dəfə göstərilsin. Əgər belədirsə, kədərlənməyin, biz bu barədə sonra danışacağıq.

Tələbə tətbiqinizi açın. Onda StudentsList.jsx faylını açın. Ona dərs materialına uyğun olaraq lazımi hook-ları və thunk-i import edin.

Dərs materiallarını öyrənərək, studentStatus sorğu statusunu əldə edin, sonra isə useEffect istifadə edərək, fetchStudents-i yalnız studentStatus dəyəri 'idle' olduqda göndərin.

Tətbiqinizi işə salın, sol menyuda 'Students'-a klikləyin, sonra brauzerdə Redux DevTools genişlənməsini işə salın, bu dərsdə olduğu kimi siz pending və fulfilled (və onun içində tələbələr olan payload) olan action-ları görməlisiniz. Genişlənmənin vərəqləri arasında gəzinin.