Slanje thunk-a iz komponente u Redux

Na ovoj lekciji ćemo poslati thunk za dobijanje proizvoda iz React komponente ProductsList.

Hajde sada da otvorimo našu aplikaciju sa proizvodima, a u njoj fajl ProductsList.jsx. Za početak da dodamo u import thunk fetchProducts, koji smo kreirali:

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

Takođe će nam trebati hook useDispatch za slanje našeg action creator-a i hook useEffect jer ovde imamo nuspojavu (side effect), pošto imamo posla sa mrežom, a to je već eksterni API:

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

Sada prvu liniju u kodu funkcije ProductsList pre deklaracije products da dodamo:

const dispatch = useDispatch()

Zatim prilikom dobijanja proizvoda iz stanja izvlačićemo i status zahteva:

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

I odmah nakon toga reći React-u pomoću hook-a useEffect, da nam nakon renderovanja komponente treba da dobijemo proizvode. Ovde nam je potreban status zahteva, jer nam je važno da se takav zahtev šalje samo jednom:

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

Sada možemo da pokrenemo našu aplikaciju, kliknemo u njoj na 'Products' u meniju levo. Listu proizvoda još nećemo videti, ali ako udjemo u naš Redux DevTools, onda u levoj partiji prozorčića pojaviće se automatski generisani (kao što sam rekao na prošloj lekciji) akcije products/fetchProducts/pending i fulfilled. Sada hajde da kliknemo na akciju products/fetchProducts/fulfilled i na njeno polje payload - evo i našeg spiska proizvoda! Ura, svi naši lanci - server, baza, klijent i Redux - aplikacija rade usaglašeno i zajedno. Uzgred, kao što vidite ovde još postoji svojstvo meta, u kojem vidimo status zahteva.

Obratimo pažnju na još jednu stvar, kod vas može da se desi da se pending i, posledično, fulfilled budu prikazani dva puta. Ako je tako, onda ne brinite, o tome ćemo da pričamo kasnije.

Otvorite vašu aplikaciju sa studentima. Otvorite u njoj fajl StudentsList.jsx. Importujte u njega potrebne hook-ove i thunk u skladu sa materijalom iz lekcije.

Nakon što ste proučili materijal lekcije, dobijte status zahteva studentStatus, a zatim, koristeći useEffect, pošaljite fetchStudents samo pod uslovom da je vrednost studentStatus - 'idle'.

Pokrenite vašu aplikaciju, kliknite u meniju aplikacije levo na 'Students', a zatim pokrenite u browser-u ekstenziju Redux DevTools, kao i na ovoj lekciji trebalo bi da vidite akcije sa pending i fulfilled (a u njemu payload sa studentima). Prošetajte po karticama ekstenzije.