Invio di thunk dal componente in Redux

In questa lezione invieremo un thunk per recuperare i prodotti dal componente React ProductsList.

Ora apriamo la nostra applicazione prodotti, e in essa il file ProductsList.jsx. Per iniziare, aggiungiamo l'import del thunk fetchProducts che abbiamo creato:

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

Avremo anche bisogno dell'hook useDispatch per inviare il nostro action creator e dell'hook useEffect perché qui abbiamo un effetto collaterale, poiché abbiamo a che fare con la rete, e questa è già un'API esterna:

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

Ora, come prima riga di codice nella funzione ProductsList, prima della dichiarazione di products, aggiungiamo:

const dispatch = useDispatch()

Successivamente, quando recuperiamo i prodotti dallo stato, estraremo anche lo stato della richiesta:

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

E subito dopo, diremo a React tramite l'hook useEffect, che dopo il rendering del componente dobbiamo recuperare i prodotti. Qui ci servirà lo stato della richiesta, poiché è importante che tale richiesta venga inviata solo una volta:

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

Ora possiamo avviare la nostra applicazione, cliccare su 'Products' nel menu a sinistra. Non vedremo ancora l'elenco dei prodotti, ma se accediamo ai nostri Redux DevTools, nella parte sinistra della finestra appariranno le azioni generate automaticamente (come ho detto nella lezione precedente) products/fetchProducts/pending e fulfilled. Ora clicchiamo sull'action products/fetchProducts/fulfilled e sul suo campo payload - ecco la nostra lista di prodotti! Evviva, tutti i nostri anelli della catena - server, database, client e l'applicazione Redux - funzionano in modo coordinato e insieme. A proposito, come potete vedere qui c'è anche la proprietà meta, in cui vediamo lo stato della richiesta.

Prestiamo attenzione a un'altra cosa, potrebbe succederti che pending e, di conseguenza, fulfilled vengano visualizzati due volte. Se è così, non ti scoraggiare, ne parleremo più tardi.

Apri la tua applicazione studenti. Apri in essa il file StudentsList.jsx. Importa in esso gli hook necessari e il thunk secondo il materiale della lezione.

Dopo aver studiato il materiale della lezione, recupera lo stato della richiesta studentStatus, e poi, usando useEffect, invia fetchStudents solo a condizione che il valore di studentStatus sia 'idle'.

Avvia la tua applicazione, clicca nel menu dell'applicazione a sinistra su 'Students', e poi avvia l'estensione del browser Redux DevTools, come in questa lezione dovresti vedere le azioni con pending e fulfilled (e in essa payload con gli studenti). Esplora le schede dell'estensione.