Skicka thunk från en komponent i Redux

I den här lektionen kommer vi att skicka en thunk för att hämta produkter från React-komponenten ProductsList.

Låt oss nu öppna vår produktapplikation, och i den filen ProductsList.jsx. Låt oss först lägga till importen av thunk fetchProducts som vi skapade:

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

Vi kommer också att behöva hooken useDispatch för att skicka vår action creator och hooken useEffect eftersom vi här har en bieffekt, eftersom vi har att göra med nätverk, vilket är ett externt API:

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

Nu, som första rad i funktionen ProductsList före deklarationen av products, låt oss lägga till:

const dispatch = useDispatch()

Vidare, när vi hämtar produkter från state kommer vi också att extrahera status för förfrågan:

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

Och direkt efter detta berättar vi för React med hjälp av hooken useEffect, att vi efter att komponenten har renderats behöver hämta produkterna. Här kommer vi att behöva förfrågningsstatusen, eftersom det är viktigt för oss att en sådan förfrågan skickas endast en gång:

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

Nu kan vi starta vår applikation, klicka på 'Products' i menyn till vänster. Vi kommer inte att se produktlistan ännu, men om vi går in i vårt Redux DevTools, så i den vänstra delen av fönstret kommer de automatiskt genererade actionerna (som jag sa i förra lektionen) products/fetchProducts/pending och fulfilled att dyka upp. Låt oss nu klicka på actionen products/fetchProducts/fulfilled och på dess fält payload - här är vår lilla produktlista! Hurra, alla våra länkar i kedjan - server, databas, klient och Redux-applikationen - fungerar samordnat och tillsammans. Förresten, som ni ser finns det också en egenskap meta här, där vi kan se status för förfrågan.

Låt oss uppmärksamma en sak till, du kanske upplever att pending och, följaktligen, fulfilled visas två gånger. Om så är fallet, var inte ledsen, vi kommer att prata om detta senare.

Öppna din applikation med studenter. Öppna filen StudentsList.jsx i den. Importera de nödvändiga hookarna och thunken enligt materialet från lektionen.

Efter att ha studerat lektionsmaterialet, hämta förfrågningsstatusen studentStatus, och sedan, med hjälp av useEffect, skicka fetchStudents endast under förutsättning att värdet på studentStatus är 'idle'.

Starta din applikation, klicka på 'Students' i applikationsmenyn till vänster, och starta sedan Redux DevTools-tillägget i webbläsaren, som i den här lektionen bör du se actionerna med pending och fulfilled (och i den payload med studenterna). Utforska flikarna i tillägget.