Odosielanie údajov zo servera pomocou GET požiadavky v Reduxe

Takže máme databázu s údajmi. Prvá vec, ktorú urobíme pri spustení našej Redux aplikácie - je získanie údajov o produktoch zo servera. Na to potrebujeme z našej aplikácie odoslať GET požiadavku. Poďme ju spracovať na strane servera.

Otvorme našu aplikáciu s produktmi, a v nej súbor server.js. Aby sme mohli pracovať s HTTP požiadavkami, potrebujeme importovať do súboru niekoľko nástrojov z msw, poďme to urobiť:

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

Tiež hneď urobme úpravy na realitu, to znamená možné oneskorenia v sieti. Nech hodnota nášho umelého oneskorenia bude predstavovať 2 sekundy, aby sme videli ako sa načítavajú údaje. Napíšme ho po const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

A teraz na konci súboru pred exportom workera vytvorme pole pre API handlerov požiadaviek:

export const handlers = []

A potom v hranatých zátvorkách napíšme prvý handler na zachytenie GET požiadavky produktov:

export const handlers = [http.get()]

Prvým parametrom pre http.get predáme nejakú falošnú adresu, napríklad '/fakeServer/products', a druhým asynchrónny callback:

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

Teraz napíšme kód pre tento callback. S pomocou neho extrahujeme všetky produkty z databázy. Tu tiež použijeme funkciu serializeProduct, ktorej kód sme napísali na minulej hodine. Poďme ju odovzdať do map. Potom urobme oneskorenie (ako keby sieť pomalšie fungovala) a vráťme v response objekty s údajmi produktov vo forme 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)
	}),
]

A posledné. Napísali sme prvý handler pre nášho workera, poďme odovzdať tomuto workerovi pole handlers. Na to opravme posledný riadok kódu v súbore na:

export const worker = setupWorker(...handlers)

Otvorte vašu aplikáciu so študentmi, a v nej súbor server.js. Importujte do súboru uvedené nástroje z msw. Po preštudovaní materiálu tejto lekcie vytvorte prázdne pole handlerov pre zachytávanie požiadaviek. Napíšte v ňom kód pre handler GET požiadavky študentov. Ako cestu nech máte '/fakeServer/students'.

Na konci súboru nezabudnite odovzdať pole handlerov handlers workerovi.