Sending av thunk fra en komponent i Redux

I denne leksjonen skal vi sende en thunk for å hente produkter fra React-komponenten ProductsList.

La oss nå åpne applikasjonen vår med produkter, og i den filen ProductsList.jsx. Først, la oss legge til import av thunk-en fetchProducts som vi opprettet:

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

Vi trenger også hook-en useDispatch for å sende vår action creator og hook-en useEffect fordi vi her har en bivirkning, siden vi har med et nettverk å gjøre, og det er allerede et eksternt API:

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

Nå, som første linje i koden til funksjonen ProductsList før deklarasjonen av products, legger vi til:

const dispatch = useDispatch()

Deretter, når vi henter produkter fra staten, vil vi også trekke ut statusen for forespørselen:

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

Og umiddelbart etter dette forteller vi React ved hjelp av hook-en useEffect, at vi etter at komponenten er rendret, trenger å hente produktene. Her trenger vi statusen for forespørselen, fordi det er viktig for oss at en slik forespørsel sendes bare én gang:

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

Nå kan vi starte applikasjonen vår, klikke på 'Products' i menyen til venstre. Vi vil ikke se produktlisten ennå, men hvis vi går inn i Redux DevTools våre, vil vi i den venstre delen av vinduet se de automatisk genererte ( som jeg sa i forrige leksjon) handlingene products/fetchProducts/pending og fulfilled. La oss nå klikke på action-en products/fetchProducts/fulfilled og på feltet payload - her er produktlisten vår! Hurra, alle våre ledd i kjeden - server, database, klient og Redux - applikasjonen jobber samordnet og sammen. Forresten, som du ser her er det også en egenskap meta, der vi ser statusen for forespørselen.

La oss legge merke til en ting til, det kan hende at pending og, følgelig, fulfilled vil vises to ganger. Hvis det er slik, så ikke vær bekymret, vi skal snakke om dette senere.

Åpne applikasjonen din med studenter. Åpne filen StudentsList.jsx i den. Importer de nødvendige hook-ene og thunk-en i henhold til materialet fra leksjonen.

Etter å ha studert leksjonsmaterialet, hent statusen for forespørselen studentStatus, og deretter, ved å bruke useEffect, send fetchStudents bare på betingelse av at verdien studentStatus er 'idle'.

Start applikasjonen din, klikk på 'Students' i applikasjonsmenyen til venstre, og start deretter Redux DevTools-utvidelsen i nettleseren. Som i denne leksjonen skal du se handlinger med pending og fulfilled (og i den payload med studentene). Utforsk fanene i utvidelsen.