Dërgimi i thunk nga një komponent në Redux

Në këtë mësim do të dërgojmë një thunk për të marrë produktet nga komponenti React ProductsList.

Tani le të hapim aplikacionin tonë të produkteve, dhe në të skedarin ProductsList.jsx. Për të filluar, le të shtojmë importin e thunk fetchProducts, që krijuam:

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

Gjithashtu do të na duhet hook useDispatch për të dërguar krijuesin tonë të veprimit (action creator) dhe hook useEffect sepse këtu kemi një efekt anësor, pasi kemi të bëjmë me rrjetin, dhe ky është tashmë një API i jashtëm:

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

Tani, në rreshtin e parë të kodit të funksionit ProductsList para deklarimit të products le të shtojmë:

const dispatch = useDispatch()

Më pas, kur marrim produktet nga gjendja (state) do të nxjerrim edhe statusin e kërkesës:

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

Dhe menjëherë pas kësaj, le t'i tregojmë React me ndihmën e hook useEffect, që pas renderimit të komponentit na duhet të marrim produktet. Këtu na duhet statusi i kërkesës, sepse është e rëndësishme që një kërkesë e tillë të dërgohet vetëm një herë:

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

Tani mund të ekzekutojmë aplikacionin tonë, të klikojmë në 'Products' në menunë majtas. Ne nuk do të shohim listën e produkteve ende, por nëse shkojmë në Redux DevTools tonë, atëherë në pjesën e majtë të dritares do të shfaqen veprimet (actions) e krijuara automatikht (siç thashë në mësimin e kaluar) products/fetchProducts/pending dhe fulfilled. Tani le të klikojmë në action products/fetchProducts/fulfilled dhe në fushën e tij payload - ja ku është lista jonë e produkteve! Ura, të gjitha lidhjet tona në zinxhir - serveri, baza e të dhënave, klienti dhe aplikacioni Redux - punojnë në mënyrë të koordinuar dhe së bashku. Meqë ra fjala, siç mund ta shihni këtu ka edhe vetinë meta, ku mund të shohim statusin e kërkesës.

Le t'i kushtojmë vëmendje një gjëje tjetër, ju mund të ndodhë që pending dhe, rrjedhimisht, fulfilled të shfaqen dy herë. Nëse ndodh kështu, mos u hidhëroni, do të flasim për këtë më vonë.

Hapni aplikacionin tuaj me studentët. Hapni skedarin StudentsList.jsx në të. Importoni në të hook-et e nevojshme dhe thunk sipas materialit nga mësimi.

Pasi të keni studiuar materialet e mësimit, merrni statusin e kërkesës studentStatus, dhe më pas, duke përdorur useEffect, dërgoni fetchStudents vetëm nëse vlera e studentStatus është 'idle'.

Ekzekutoni aplikacionin tuaj, klikoni në menunë e aplikacionit majtas në 'Students', dhe më pas nisni shtesën (extension) Redux DevTools në shfletues, ashtu si në këtë mësim ju duhet të shihni veprimet (actions) me pending dhe fulfilled (dhe në të payload me studentët). Eksploroni skedat e ndryshme të shtesës.