Tietojen lähettäminen palvelimelta GET-pyynnöllä Reduxissa

Meillä on siis tietokanta tiedoilla. Ensimmäinen asia, jota teemme Redux-sovelluksemme käynnistyessä, on tuotteiden tietojen haku palvelimelta. Tätä varten meidän täytyy sovelluksestamme lähettää GET-pyyntö. Käsitellään se palvelimen puolella.

Avataan tuotesovelluksemme, ja siinä tiedosto server.js. Jotta voimme käsitellä HTTP-pyyntöjä, meidän täytyy tuoda tiedostoon useita työkaluja msw:stä, tehdään tämä:

api/server.jsimport { http, HttpResponse, delay } from 'msw'

Tehdään myös heti todellisuutta vastaavat oikaisut, eli mahdolliset viiveet verkossa. Olkoon keinotekoisen viiveen arvo 2 sekuntia, jotta näemme kuinka tiedot ladataan. Kirjoitetaan se const PRODS_PER_SELLER = 2:n jälkeen:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

Ja nyt tiedoston lopussa ennen workerin vientiä luomme taulukon API pyyntökäsittelijöille:

api/server.jsexport const handlers = []

Ja sitten hakasulkeisiin kirjoitamme ensimmäisen käsittelijän GET-pyynnön sieppaamiseksi tuotteille:

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

Ensimmäisenä parametrina http.get:lle välitämme jokin feikki-osoite, esimerkiksi '/fakeServer/products', ja toisena asynkronisen callbackin:

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

Kirjoitetaan nyt koodi tälle callbackille. Sen avulla poimimme kaikki tuotteet tietokannasta. Täällä käytämme myös funktiota serializeProduct, jonka koodin kirjoitimme edellisellä tunnilla. Välitetään se map:iin. Tehdään sitten viive (kuin verkko hidastelisi) ja palautetaan response:en tuotetietoobjektit JSON-muodossa:

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)
  }),
]

Ja viimeisenä. Kirjoitimme ensimmäisen handlerin workerillemme, välitetään tälle workerille taulukko handlers. Tätä varten korjaamme viimeisen rivin koodia tiedostossa muotoon:

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