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:

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

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

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

api/server.jsexport const handlers = []

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

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

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

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

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:

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