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:

api/server.jsimport { 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:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

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

api/server.jsexport const handlers = []

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

api/server.jsexport const handlers = [http.get()]

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

api/server.jsexport 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:

api/server.jsexport 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:

api/server.jsexport const worker = setupWorker(...handlers)