Udsendelse af thunk fra komponent i Redux

I denne lektion vil vi sende en thunk for at hente produkter fra React-komponenten ProductsList.

Lad os nu åbne vores produktapplikation, og i den filen ProductsList.jsx. Til at starte med tilføjer vi importen af thunken fetchProducts, som vi oprettede:

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

Vi har også brug for hooket useDispatch for at sende vores action creator og hooket useEffect fordi vi her har en bivirkning, da vi har at gøre med netværk, og det er allerede en ekstern API:

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

Nu som første linje i koden for funktionen ProductsList før deklarationen af products tilføjer vi:

const dispatch = useDispatch()

Dernæst, når vi henter produkter fra staten, vil vi også udtrække anmodningens status:

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

Og straks efter fortæller vi React ved hjælp af hooket useEffect, at vi efter rendering af komponenten skal hente produkter. Her har vi brug for anmodningens status, for det er vigtigt for os, at en sådan anmodning kun sendes én gang:

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

Lige nu kan vi starte vores applikation, klikke på 'Products' i menuen til venstre. Vi vil ikke se listen over produkter endnu, men hvis vi går ind i vores Redux DevTools, så i den venstre del af vinduet vil vores automatisk genererede (som jeg sagde i forrige lektion) actions products/fetchProducts/pending og fulfilled dukke op. Lad os nu klikke på action products/fetchProducts/fulfilled og på dets felt payload - der er vores lille produktliste! Hurra, alle vores led i kæden - server, database, klient og Redux - applikationen arbejder sammen og koordineret. Forresten, som I kan se, er der også en egenskab meta, hvor vi ser anmodningens status.

Lad os lægge mærke til en ting mere, det kan ske for dig, at pending og, følgelig, fulfilled vil blive vist to gange. Hvis det er tilfældet, vær ikke bekymret, vi taler om det senere.

Åbn din applikation med studerende. Åbn filen StudentsList.jsx i den. Importer de nødvendige hooks og thunk i overensstemmelse med materialet fra lektionen.

Efter at have studeret lektionens materiale, skal du hente anmodningens status studentStatus, og derefter, ved at bruge useEffect, sende fetchStudents kun under betingelsen af, at værdien af studentStatus er 'idle'.

Start din applikation, klik i applikationens menu til venstre på 'Students', og start derefter Redux DevTools-udvidelsen i browseren, som i denne lektion skal du se actions med pending og fulfilled (og i den payload med studerende). Udforsk fanebladene i udvidelsen.