Thunkin lähettäminen komponentista Reduxiin

Tällä oppitunnilla lähetämme thunkin tuotteiden hakemiseksi React-komponentista ProductsList.

Avataan nyt tuotesovelluksemme, ja siellä tiedosto ProductsList.jsx. Aluksi lisätään importaukseen thunk fetchProducts, jonka loimme:

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

Tarvitsemme myös hookin useDispatch lähettääksemme action creatorimme ja hookin useEffect, koska tässä on kyse sivuvaikutuksesta, koska käsittelemme verkkoa, ja se on ulkoinen API:

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

Nyt ensimmäiseksi riviksi funktion ProductsList koodissa ennen products:n määrittelyä lisätään:

const dispatch = useDispatch()

Seuraavaksi, kun haemme tuotteita tilasta, poimimme myös pyynnön tilan:

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

Ja heti tämän jälkeen kerromme Reactille hookin useEffect avulla, että komponentin renderöinnin jälkeen meidän on haettava tuotteet. Tässä tarvitsemme pyynnön tilan, sillä on tärkeää, että tällainen pyyntö lähetetään vain kerran:

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

Nyt voimme käynnistää sovelluksemme, klikata siellä vasemmalla olevasta valikosta kohtaa 'Products'. Emme vielä näe tuotelistaa, mutta jos menemme Redux DevTools:iimme, niin vasemmassa osassa ikkunaa näkyvät automaattisesti generoidut (toisin kuin sanoin edellisellä oppitunnilla) actionit products/fetchProducts/pending ja fulfilled. Nyt klikataan actionia products/fetchProducts/fulfilled ja sen kenttää payload - siinä on tuotelistamme! Hurraa, kaikki ketjumme lenkit - palvelin, tietokanta, asiakas ja Redux - sovellus toimivat yhdessä ja yhtenäisesti. Muuten, kuten näette, täällä on myös ominaisuus meta, jossa näemme pyynnön tilan.

Kiinnitetään huomiota toiseen asiaan, sinulla saattaa käydä niin, että pending ja, siten, fulfilled näkyvät kahdesti. Jos näin on, älä huoli, puhumme siitä myöhemmin.

Avaa opiskelijasovelluksesi. Avaa siellä tiedosto StudentsList.jsx. Importtaa siihen tarvittavat hookit ja thunk oppitunnin materiaalin mukaisesti.

Tutkittuasi oppitunnin materiaalin, hae pyynnön tila studentStatus, ja sitten, käyttäen useEffect:ia, lähetä fetchStudents vain sillä ehdolla, että studentStatus:n arvo on 'idle'.

Käynnistä sovelluksesi, klikkaa sovelluksen vasemmalla olevasta valikosta kohtaa 'Students', ja sitten käynnistä selaimessa Redux DevTools -laajennus, kuten tällä oppitunnilla sinun pitäisi nähdä actionit pending ja fulfilled (ja siinä payload:ssa opiskelijat). Selaa laajennuksen välilehtiä.