Trimiterea unui thunk dintr-un component în Redux

În această lecție, vom trimite thunk-ul pentru obținerea produselor din componentul React ProductsList.

Să deschidem acum aplicația noastră cu produse, iar în ea fișierul ProductsList.jsx. Pentru început, să adăugăm la import thunk-ul fetchProducts, pe care l-am creat:

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

De asemenea, vom avea nevoie de hook-ul useDispatch pentru a trimite creatorul nostru de acțiuni și hook-ul useEffect deoarece aici avem un efect secundar, întrucât avem de-a face cu rețeaua, iar aceasta este deja o API externă:

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

Acum, prima linie de cod în funcția ProductsList, înainte de declararea products, să adăugăm:

const dispatch = useDispatch()

În continuare, atunci când obținem produsele din starea (state) vom extrage și statusul cererii:

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

Și imediat după aceasta, îi spunem lui React cu ajutorul hook-ului useEffect, că după randarea componentului trebuie să obținem produsele. Aici ne va fi util și statusul cererii, deoarece este important pentru noi ca o astfel de cerere să fie trimisă doar o singură dată:

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

Acum putem porni aplicația noastră, să facem clic pe 'Products' în meniul din stânga. Nu vom vedea încă lista de produse, dar dacă deschidem Redux DevTools, în partea stângă a ferestrei vor apărea acțiunile generate automat (cum am spus în lecția precedentă) products/fetchProducts/pending și fulfilled. Acum să facem clic pe acțiunea products/fetchProducts/fulfilled și pe câmpul său payload - iată lista noastră de produse! Ura, toate verigile lanțului nostru - serverul, baza de date, clientul și aplicația Redux - funcționează coordonat și împreună. Apropo, după cum vedeți aici mai există și proprietatea meta, în care vedem statusul cererii.

Să acordăm atenție încă unui lucru, vi se poate întâmpla ca pending și, în consecință, fulfilled să apară de două ori. Dacă este așa, nu vă descurajați, vom vorbi despre asta mai târziu.

Deschideți aplicația voastră cu studenți. Deschideți în ea fișierul StudentsList.jsx. Importați în el hook-urile necesare și thunk-ul conform materialului din lecție.

După ce ați studiat materialele lecției, obțineți statusul cererii studentStatus, apoi, folosind useEffect, trimiteți fetchStudents doar cu condiția ca valoarea studentStatus să fie 'idle'.

Porniți aplicația voastră, faceți clic în meniul aplicației din stânga pe 'Students', apoi lansați extensia din browser Redux DevTools, la fel ca în această lecție ar trebui să vedeți acțiunile cu pending și fulfilled (iar în acesta payload cu studenții). Explorați filele extensiei.