Introduzione ai thunks in Redux

Nel capitolo precedente abbiamo organizzato il lavoro del server, del database e del client per lo scambio di dati. Ora dobbiamo getire l'ultimo collegamento, che aiuterà la nostra applicazione Redux organizzata in modo 'sincrono' a interagire con il client asincrono che abbiamo creato nell'ultima lezione del capitolo precedente, per inviare richieste e ricevere i dati necessari in risposta.

Come ricordiamo dalle prime lezioni della sezione precedente, Redux non sa nulla della gestione della logica asincrona e per questo useremo il middleware thunk. Questo middleware consente di lavorare con le actions inviate, utilizzare nel codice del nostro thunk i metodi dispatch e getState dello store, e anche aiutare il metodo dispatch a lavorare non solo con semplici oggetti JS, ma anche con entità come funzioni e promise.

Di solito una funzione thunk viene chiamata con due argomenti dispatch e getState (se necessario), che possono essere utilizzati nel corpo di questa funzione. Con essa si possono inviare azioni ordinarie. Inoltre può essere inviata tramite store.dispatch. Un esempio di tale funzione è riportato di seguito:

jsxconst changeColorThunk = (dispatch, getState) => {
  const colorBefore = getState()
  console.log(`Vecchio Colore: ${colorBefore.color}`)
  
  dispatch(changeColor())
  
  const colorAfter = getState()
  console.log(`Nuovo Colore: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Ora apriamo la nostra applicazione sui prodotti. La prima cosa che dobbiamo ottenere dal server all'avvio dell'applicazione è l'elenco dei prodotti. Dato che di solito i thunks sono scritti nei file degli slice, apriremo il file productsSlice.js.

La lieta notizia è che non dobbiamo preoccuparci dell'installazione di Redux Thunk, poiché la funzione configureStore di RTK lo farà già per noi. Quindi aggiungiamo semplicemente createAsyncThunk nell'import nel file:

products/productsSlice.jsimport { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

Aggiungiamo anche il nostro client nell'import:

products/productsSlice.jsimport { client } from '../../api/client'

E ora utilizzando createAsyncThunk creiamo il nostro primo thunk per ottenere i prodotti, facciamolo subito dopo la dichiarazione dell'oggetto initialState:

products/productsSlice.jsexport const fetchProducts = createAsyncThunk()

Il primo parametro di createAsyncThunk accetterà una stringa per il tipo dell'azione generata, e il secondo - una funzione di callback per payload, che restituirà o i dati, o una promise con un errore (controlla il file client.js). Nel codice della funzione chiamiamo client.get e gli passiamo il percorso che abbiamo specificato sul server (controlla i parametri accettati da http.get in server.js):

products/productsSlice.jsexport const fetchProducts = createAsyncThunk(
  'products/fetchProducts',
  async () => {
    const response = await client.get('/fakeServer/products')
    return response.data
  }
)