Stuur thunk vanaf komponent in Redux

In hierdie les sal ons 'n thunk stuur om die produkte van die React-komponent ProductsList te kry.

Laat ons nou ons toepassing met produkte oopmaak, en daarin die lêer ProductsList.jsx. Om mee te begin, voeg ons die thunk fetchProducts by wat ons geskep het by die invoer:

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

Ons sal ook die haak useDispatch nodig hê om ons action creator te stuur en die haak useEffect omdat ons hier 'n newe-effek het, aangesien ons met die netwerk te doen het, en dit is reeds 'n eksterne API:

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

Nou, as die eerste reël in die kode van die funksie ProductsList voor die verklaring van products, voeg ons by:

const dispatch = useDispatch()

Vervolgens, wanneer ons produkte uit die staat kry, ons sal ook die versoekstatus onttrek:

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

En dadelik hierna sê vir React met behulp van die haak useEffect, dat ons na die rendering van die komponent die produkte moet kry. Hier het ons die versoekstatus nodig, want dit is belangrik dat so 'n versoek net een keer gestuur word:

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

Nou kan ons ons toepassing begin, klik daarin op 'Products' in die kieslys links. Ons sal die lys produkte nie dadelik sien nie, maar as ons na ons Redux DevTools gaan, dan sal aan die linkerkant van die venster die outomaties gegenereerde aksies (soos ek in die vorige les gesê het) products/fetchProducts/pending en fulfilled verskyn. Laat ons nou op die aksie products/fetchProducts/fulfilled klik en op sy veld payload - hier is ons lysie produkte! Hoera, al ons skakels in die ketting - bediener, databasis, kliënt en Redux - die toepassing werk gesamenlik en samewerkend. Terloops, soos jy hier sien is daar ook die eienskap meta, waarin ons die versoekstatus sien.

Laat ons ook aandag gee aan nog een ding, by jou kan dit gebeur dat pending en, gevolglik, fulfilled twee keer vertoon sal word. As dit so is, moenie jou hart laat sak nie, ons sal later daaroor praat.

Maak jou toepassing met studente oop. Maak die lêer StudentsList.jsx daarin oop. Voer die nodige hake en thunk daarin in volgens die materiaal uit die les.

Nadat jy die materiaal uit die les bestudeer het, kry die versoekstatus studentStatus, en dan, deur useEffect te gebruik, stuur fetchStudents slegs op voorwaarde dat die waarde van studentStatus - 'idle' is.

Begin jou toepassing, klik in die toepassingkieslys links op 'Students', en begin dan die Redux DevTools-uitbreiding in die blaaier, soos in hierdie les moet jy die aksies sien met pending en fulfilled (en daarin payload met studente). Loer rond in die oortjies van die uitbreiding.