Thunk nosūtīšana no komponenta uz Redux

Šajā nodarbībā mēs nosūtīsim thunk, lai iegūtu produktus no React komponenta ProductsList.

Tagad atveram mūsu produktu lietotni, un tajā failu ProductsList.jsx. Sākumā pievienojam importētajam thunk fetchProducts, ko mēs izveidojām:

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

Mums arī būs nepieciešams hooks useDispatch lai nosūtītu mūsu action creator un hooks useEffect, jo šeit mums ir blakus efekts, jo mums ir darīšana ar tīklu, un tas jau ir ārēja API:

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

Tagad pirmo rindiņu funkcijas ProductsList kodā pirms products deklarēšanas pievienosim:

const dispatch = useDispatch()

Tālāk, iegūstot produktus no stāvokļa, mēs arī izvilksim pieprasījuma statusu:

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

Un uzreiz pēc tam pateiksim React ar hooks useEffect palīdzību, ka pēc komponenta zīmēšanas mums ir jāiegūst produkti. Šeit mums noderēs pieprasījuma statuss, jo mums ir svarīgi, lai šāds pieprasījums tiktu nosūtīts tikai vienu reizi:

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

Tagad mēs varam palaist mūsu lietotni, klikšķināt tajā uz 'Products' kreisajā izvēlnē. Produktu sarakstu mēs pagaidām neredzēsim, bet ja mēs ejam uz mūsu Redux DevTools, tad kreisajā daļā logiņā mums parādīsies automātiski ģenerētās (kā jau es teicu pagājušajā nodarbībā) darbības products/fetchProducts/pending un fulfilled. Tagad klikšķināsim uz action products/fetchProducts/fulfilled un uz tā lauka payload - lūk, mūsu mazais produktu sarakstiņš! Urā, visi mūsu posmi ķēdē - serveris, datubāze, klients un Redux - lietotne strādā saskaņoti un kopā. Starp citu, kā redzat šeit ir arī īpašība meta, kurā mēs redzam pieprasījuma statusu.

Pievērsīsim uzmanību vēl vienai lietai, jums var gadīties tā, ka pending un, secīgi, fulfilled tiks parādīti divas reizes. Ja tā ir, tad neesiet noraizējušies, mēs par to runāsim vēlāk.

Atveriet savu studentu lietotni. Atveriet tajā failu StudentsList.jsx. Importējiet tajā nepieciešamos hookus un thunk saskaņā ar materiālu no nodarbības.

Izpētījuši nodarbības materiālus, iegūstiet pieprasījuma statusu studentStatus, un pēc tam, izmantojot useEffect, nosūtiet fetchStudents tikai ar nosacījumu, ka studentStatus vērtība - 'idle'.

Palaidiet savu lietotni, klikšķiniet lietotnes izvēlnē pa kreisi uz 'Students', un pēc tam palaidiet pārlūkā paplašinājumu Redux DevTools, kā arī šajā nodarbībā jums vajadzētu redzēt darbības ar pending un fulfilled (un tajā payload ar studentiem). Pameklējiet pa paplašinājuma cilnēm.