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

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

const ARTIFICIAL_DELAY_MS = 2000

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

export const handlers = []

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

export const handlers = [http.get()]

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

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

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

export const worker = setupWorker(...handlers)

Avaa opiskelijasovelluksesi, ja siinä tiedosto server.js. Tuo tiedostoon määritellyt työkalut msw:stä. Opiskeltuasi tämän oppitunnin materiaalin, luo tyhjä taulukko pyyntökäsittelijöille. Kirjoita siihen koodi opiskelijoiden GET-pyynnön käsittelijälle. Polkuna olkoon '/fakeServer/students'.

Tiedoston lopussa älä unohda välittää käsittelijätaulukko handlers workerille.