Thunk verzenden vanuit component in Redux

In deze les zullen we een thunk verzenden om producten op te halen uit de React-component ProductsList.

Laten we nu onze productenapplicatie openen, en daarin het bestand ProductsList.jsx. Laten we eerst de thunk fetchProducts importeren die we hebben gemaakt:

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

We hebben ook de hook useDispatch nodig om onze action creator te verzenden en de hook useEffect omdat we hier te maken hebben met een bijwerking, aangezien we te maken hebben met het netwerk, en dat is al een externe API:

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

Voeg nu als eerste regel in de code van de functie ProductsList, vóór de declaratie van products, het volgende toe:

const dispatch = useDispatch()

Vervolgens zullen we bij het ophalen van producten uit de state ook de status van het verzoek ophalen:

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

En direct daarna vertellen we React met behulp van de hook useEffect, dat we na het renderen van de component de producten moeten ophalen. Hier hebben we de verzoekstatus nodig, want het is belangrijk dat een dergelijk verzoek slechts één keer wordt verzonden:

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

We kunnen nu onze applicatie starten, klik op 'Products' in het menu aan de linkerkant. We zullen de lijst met producten nog niet zien, maar als we naar onze Redux DevTools gaan, dan aan de linkerkant van het venster zullen de automatisch gegenereerde acties verschijnen (zoals ik in de vorige les zei) products/fetchProducts/pending en fulfilled. Laten we nu op de action products/fetchProducts/fulfilled klikken en op zijn veld payload - hier is onze lijst met producten! Hoera, al onze schakels in de keten - server, database, client en Redux - applicatie werken soepel en gezamenlijk. Trouwens, zoals je hier ziet is er ook een eigenschap meta, waarin we de status van het verzoek zien.

Laten we nog één ding opmerken, bij jou kan het gebeuren dat pending en, dientengevolge, fulfilled twee keer worden weergegeven. Als dat zo is, wees dan niet ontmoedigd, we zullen hier later over praten.

Open je applicatie met studenten. Open daarin het bestand StudentsList.jsx. Importeer de benodigde hooks en thunk volgens de lesstof.

Bestudeer de lesstof, haal de verzoekstatus studentStatus op, en vervolgens, gebruikmakend van useEffect, verzend fetchStudents alleen onder de voorwaarde dat de waarde van studentStatus - 'idle' is.

Start je applicatie, klik in het applicatiemenu aan de linkerkant op 'Students', en start vervolgens de Redux DevTools-extensie in de browser. Net als in deze les zou je acties moeten zien met pending en fulfilled (en daarin payload met studenten). Verken de tabbladen van de extensie.