Odesílání dat ze serveru pomocí GET požadavku v Reduxu

Takže máme databázi s daty. První věc, kterou uděláme při spuštění naší Redux aplikace, je získání dat o produktech ze serveru. K tomu potřebujeme z naší aplikace odeslat GET požadavek. Pojďme jej zpracovat na straně serveru.

Otevřeme naši aplikaci s produkty, a v ní soubor server.js. Abychom mohli pracovat s HTTP požadavky, potřebujeme importovat do souboru několik nástrojů z msw, pojďme to udělat:

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

Také hned udělejme úpravy na realitu, tedy možné zpoždění v síti. Nechť hodnota našeho umělého zpoždění bude 2 sekundy, abychom viděli, jak se data načítají. Napišme jej za const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

A teď na konci souboru před exportem workera vytvoříme pole pro API handlery požadavků:

export const handlers = []

A poté v hranatých závorkách napíšeme první handler pro zachycení GET požadavku produktů:

export const handlers = [http.get()]

Jako první parametr pro http.get předáme nějakou falešnou adresu, například '/fakeServer/products', a jako druhý asynchronní callback:

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

Nyní napíšeme kód pro tento callback. S jeho pomocí extrahujeme všechny produkty z databáze. Zde také použijeme funkci serializeProduct, jejíž kód jsme napsali v minulé lekci. Pojďme ji předat do map. Poté provedeme zpoždění (jako by síť zpomalovala) a vrátíme v response objekty s daty produktů ve formátu 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 nakonec. Napsali jsme první handler pro našeho workera, pojďme předat tomuto workerovi pole handlers. K tomu upravíme poslední řádek kódu v souboru na:

export const worker = setupWorker(...handlers)

Otevřete vaši aplikaci se studenty, a v ní soubor server.js. Importujte do souboru uvedené nástroje z msw. Po prostudování materiálu této lekce vytvořte prázdné pole handlerů pro zachycování požadavků. Napište v něm kód pro handler GET požadavku studentů. Jako cestu mějte '/fakeServer/students'.

Na konci souboru nezapomeňte předat pole handlerů handlers workerovi.