Invio di dati dal server tramite richiesta GET in Redux

Quindi abbiamo un database con i dati. La prima cosa che faremo all'avvio della nostra applicazione Redux è recuperare i dati dei prodotti dal server. Per fare ciò, dobbiamo inviare una richiesta GET dalla nostra applicazione. Gestiamola lato server.

Apriamo la nostra applicazione con i prodotti, e in essa il file server.js. Per poter lavorare con le richieste HTTP, dobbiamo importare nel file diversi strumenti da msw, facciamolo:

import { http, HttpResponse, delay } from 'msw'

Inoltre, apportiamo subito delle correzioni per la realtà, cioè i possibili ritardi di rete. Lasciamo che il valore del nostro ritardo artificiale sia 2 secondi, in modo da vedere come si caricano i dati. Scriviamolo dopo const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

E ora alla fine del file, prima dell'esportazione del worker, creiamo un array per i gestori delle richieste API:

export const handlers = []

E poi tra le parentesi quadre scriviamo il primo gestore per intercettare la richiesta GET dei prodotti:

export const handlers = [http.get()]

Come primo parametro per http.get passeremo un indirizzo falso, ad esempio '/fakeServer/products', e come secondo una callback asincrona:

export const handlers = [http.get('/fakeServer/products', async () => {})]

Ora scriviamo il codice per questa callback. Con il suo aiuto, estrarremo tutti i prodotti dal database. Qui useremo anche la funzione serializeProduct, il cui codice abbiamo scritto nella lezione precedente. Passiamola in map. Poi creiamo un ritardo (come se la rete fosse lenta) e restituiamo in response gli oggetti con i dati dei prodotti in formato JSON:

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

E ultima cosa. Abbiamo scritto il primo handler per il nostro worker, passiamo a questo worker l'array handlers. Per fare ciò, modifichiamo l'ultima riga di codice nel file in:

export const worker = setupWorker(...handlers)

Aprite la vostra applicazione con gli studenti, e in essa il file server.js. Importate nel file gli strumenti indicati da msw. Dopo aver studiato il materiale di questa lezione, create un array vuoto di gestori per intercettare le richieste. Scrivete in esso il codice per il gestore della richiesta GET degli studenti. Come percorso, usate '/fakeServer/students'.

Alla fine del file, non dimenticate di passare l'array dei gestori handlers al worker.