Adatok küldése a szerverről GET kéréssel a Reduxban

Tehát van egy adatbázisunk. Az első dolog, amit a Redux alkalmazásunk indításakor fogunk tenni - az, hogy a szerverről lekérjük a termékek adatait. Ehhez az alkalmazásunkból ki kell küldenünk egy GET kérést. Fogjuk ezt kezelni a szerver oldalon.

Nyissuk meg a termékek alkalmazásunkat, és benne a server.js fájlt. Ahhoz, hogy HTTP kérésekkel dolgozzunk, importálnunk kell a fájlba néhány eszközt az msw-ből, tegyük ezt meg:

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

Azonnal tegyünk korrekciókat a valóságra, vagyis a lehetséges hálózati késésekre. Legyen mesterséges késleltetésünk értéke 2 másodperc, hogy lássuk, hogyan töltődnek be az adatok. Írjuk be a const PRODS_PER_SELLER = 2 után:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

Most pedig a fájl végén, a worker exportálása elött hozzunk létre egy tömböt az API kéréskezelők számára:

api/server.jsexport const handlers = []

Ezután a szögletes zárójelek között írjuk az első kezelőt a GET kérés termékekre történő elfogásához:

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

Az http.get első paramétereként átadunk valamilyen hamis címet, például '/fakeServer/products', a második pedig egy aszinkron callback:

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

Most írjuk meg a kódot ehhez a callback-hez. Segítségével kinyerjük az összes terméket az adatbázisból. Itt használni fogjuk a serializeProduct függvényt is, amelynek kódját az előző órán írtuk meg. Adjuk át a map-nek. Ezután végezzünk késleltetést (mintha a hálózat lassú lenne) és adjuk vissza a response-ban a termékek adatobjektumait JSON formátumban:

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

És az utolsó. Megírtuk az első handler-t a workerünkhöz, adjuk át ennek a workernek a handlers tömböt. Ehhez módosítsuk a fájl utolsó sorát a következőre:

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