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:

const 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:

import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

Aggiungiamo anche il nostro client nell'import:

import { 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:

export 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):

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

Apri la tua applicazione sugli studenti. Al suo interno, apri il file studentsSlice.js. Importa in esso la funzione createAsyncThunk per creare il thunk, e anche client per inviare richieste API al server.

Subito dopo la dichiarazione dell'oggetto initialState utilizza createAsyncThunk per creare il thunk fetchStudents per ottenere l'elenco degli studenti, che invierà una richiesta GET all'indirizzo /fakeServer/students, specificato nel tuo file server.js, e restituirà response.data, come mostrato nel materiale della lezione. Come primo parametro per createAsyncThunk specifica la stringa students/fetchStudents per il tipo dell'action.