Thunki saatmine komponendist Reduxi

Sellel tunnil saadame thunki toodete hankimiseks React-komponendist ProductsList.

Avame nüüd meie toodetega rakenduse, ja selles faili ProductsList.jsx. Alustuseks lisame importi thunki fetchProducts, mille me lõime:

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

Meil on vaja ka hooki useDispatch meie action creatori saatmiseks ja hooki useEffect, kuna siin on meil kõrvalefekt, kuna me tegeleme võrguga, mis on juba väline API:

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

Nüüd esimese reana funktsiooni ProductsList koodis enne products deklaratsiooni lisame:

const dispatch = useDispatch()

Järgmisena, kui tooted saadakse staatist, eraldame ka päringu staatuse:

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

Ja kohe pärast seda ütleme Reactile hooki useEffect abil, et peale komponendi renderdamist on vaja tooted hankida. Siin meil ongi vaja päringu staatust, sest meil on oluline, et selline päring saadetaks ainult üks kord:

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

Praegu saame käivitada meie rakenduse, klikkida selles vasakus menüüs 'Products' peal. Toodete loet me veel ei näe, aga kui me läheme meie Redux DevToolsi, siis vasakus osas akent ilmuvad automaatselt loodud ( nagu ma ütlesin eelmises tunnis) aktsioonid products/fetchProducts/pending ja fulfilled. Nüüd klõpsame action products/fetchProducts/fulfilled peal ja selle väljal payload - siin on meie toodete nimekiri! Hurraa, kõik meie lülid ahelas - server, andmebaas, klient ja Redux - rakendus töötab kooskoos ja ühtekuuluvas. Muide, nagu näete siin on veel omadus meta, milles me näeme päringu staatust.

Pöörame tähelepanu veel ühele asjale, teie puhul võib juhtuda nii, et pending ja, seega, fulfilled kuvatakse kaks korda. Kui see nii on, siis ärge muretsege, me räägime sellest hiljem.

Avage oma õpilastega rakendus. Avage selles fail StudentsList.jsx. Importige sellesse vajalikud hookid ja thunk vastavalt tunnis olevale materjalile.

Olles uuritud tunni materjale, hankige päringu staatus studentStatus, ja seejärel, kasutades useEffect, saatke fetchStudents ainult juhul, kui väärtus studentStatus on 'idle'.

Käivitage oma rakendus, klõpsake rakenduse menüüs vasakul 'Students' peal, ja seejärel käivitage brauseris laiendus Redux DevTools, nagu selles tunnis peaksite nägema aktsioone pending ja fulfilled (ja selles payload koos õpilastega). Navigeerige laienduse vahekaartidel.