Dërgimi i të dhënave nga serveri përmes kërkesës GET në Redux

Pra, ne kemi një bazë të dhënash. Gjëja e parë që ne do të bëjmë kur nisim aplikacionin tonë Redux është të marrim të dhënat e produkteve nga serveri. Për këtë, ne duhet të dërgojmë një kërkesë GET nga aplikacioni ynë. Le ta trajtojmë atë në anën e serverit.

Le të hapim aplikacionin tonë me produktet, dhe në të skedarin server.js. Në mënyrë që të punojmë me kërkesat HTTP, ne duhet të importojmë në skedar disa mjete nga msw, le ta bëjmë këtë:

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

Gjithashtu, le të bëjmë menjëherë rregullimet për realitetin, domethënë vonesat e mundshme në rrjet. Le të jetë vlera e vonesës sonë artificiale 2 sekonda, në mënyrë që të mund të shohim se si ngarkohen të dhënat. Le ta shkruajmë atë pas const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

Dhe tani, në fund të skedarit, para eksportit të worker, le të krijojmë një grup për trajtuesit e kërkesave të API:

export const handlers = []

Dhe pastaj, brenda kllapave katrore, le të shkruajmë trajtuesin e parë për ndërprerjen e kërkesës GET për produktet:

export const handlers = [http.get()]

Si parametër të parë për http.get, ne do të kalojmë ndonjë adresë të rreme, për shembull '/fakeServer/products', dhe si të dytë, një callback asinkron:

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

Tani, le të shkruajmë kodin për këtë callback. Me ndihmën e tij, ne do të nxjerrim të gjitha produktet nga DB. Këtu do të përdorim gjithashtu funksionin serializeProduct, kodin e të cilit e kemi shkruar në seancën e kaluar. Le ta kalojmë atë në map. Pastaj, le të bëjmë një vonesë (sikur rrjeti është i ngadaltë) dhe të kthejmë në response objektet me të dhënat e produkteve në formën 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)
	}),
]

Dhe e fundit. Ne kemi shkruar trajtuesin e parë për worker-in tonë, le t'ia kalojmë këtij worker grupin handlers. Për këtë, le të korrigjojmë rreshtin e fundit të kodit në skedar në:

export const worker = setupWorker(...handlers)

Hapni aplikacionin tuaj me studentët, dhe në të skedarin server.js. Importoni në skedar mjetet e specifikuara nga msw. Duke studiuar materialin e këtij mësimi, krijoni një grup bosh trajtuesish për ndërprerjet e kërkesave. Shkruani në të kodin për trajtuesin e kërkesës GET për studentët. Si rrugë, le të keni '/fakeServer/students'.

Në fund të skedarit, mos harroni të kaloni grupin e trajtuesve handlers tek worker.