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:

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

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

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

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

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

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

export const worker = setupWorker(...handlers)

Nyissa meg a diákok alkalmazását, és benne a server.js fájlt. Importálja a fájlba az msw-ből származó megadott eszközöket. Miután tanulmányozta az anyagot ebből a leckéből, hozzon létre egy üres kéréskezelő tömböt a kérések elfogásához. Írja bele a kódot a diákok GET kérésének kezelőjéhez. Az útvonal legyen '/fakeServer/students'.

A fájl végén ne felejtse el átadni a handlers kezelőtömböt a workernek.