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:

products/ProductsList.jsximport { 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:

products/ProductsList.jsximport { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

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

products/ProductsList.jsxconst dispatch = useDispatch()

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

products/ProductsList.jsxconst 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:

products/ProductsList.jsxuseEffect(() => {
  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.