Pošiljanje thunk iz komponente v Redux

V tej lekciji bomo poslali thunk za pridobitev izdelkov iz React komponente ProductsList.

Odprimo zdaj našo aplikacijo z izdelki in v njej datoteko ProductsList.jsx. Za začetek dodajmo k uvozu thunk fetchProducts, ki smo ga ustvarili:

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

Prav tako bomo potrebovali kavelj useDispatch za pošiljanje našega ustvarjalca akcije in kavelj useEffect, ker imamo tukaj stranski učinek, saj imamo opravka z omrežjem, kar je že zunanji API:

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

Zdaj naj dodamo v prvi vrstici kode funkcije ProductsList pred deklaracijo products:

const dispatch = useDispatch()

Nato bomo pri pridobivanju izdelkov iz stanja še izvlekli status zahteve:

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

In takoj za tem povemo Reactu s pomočjo kavlja useEffect, da moramo po izrisu komponente pridobiti izdelke. Tukaj bo prišel prav status zahteve, saj je pomembno, da se taka zahteva pošlje samo enkrat:

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

Trenutno lahko zaženemo našo aplikacijo, kliknemo na 'Products' v meniju na levi. Seznama izdelkov še ne bomo videli, toda če odpremo naše Redux DevTools, se bodo v levem delu okenca pojavila samodejno ustvarjena (dejanja) products/fetchProducts/pending in fulfilled. Zdaj pa kliknimo na action products/fetchProducts/fulfilled in njegovo polje payload - tukaj je naš seznam izdelkov! Hura, vsi naši členi v verigi - strežnik, baza, odjemalec in Redux - aplikacija delujejo usklajeno in skupaj. Mimogrede, kot vidite, je tukaj še lastnost meta, v kateri vidimo status zahteve.

Bodimo pozorni še na eno stvar, pri vas se lahko zgodi, da se bosta pending in, posledično, fulfilled prikazala dvakrat. Če je temu tako, ne bodite potrti, o tem bomo govorili kasneje.

Odprite vašo aplikacijo s študenti. Odprite v njej datoteko StudentsList.jsx. Uvozite vanjo potrebne kavlje in thunk v skladu z gradivom iz lekcije.

Po preučitvi gradiva lekcije pridobite status zahteve studentStatus, nato pa z uporabo useEffect pošljite fetchStudents le pod pogojem, da je vrednost studentStatus - 'idle'.

Zaženite vašo aplikacijo, kliknite v meniju aplikacije na levi na 'Students', nato pa zaženite v brskalniku razširitev Redux DevTools, kot v tej lekciji bi morali videti dejanja z pending in fulfilled (v njem payload s študenti). Raziščite zavihke razširitve.