Slanje podataka sa servera preko GET zahteva u Redux-u

Dakle, imamo bazu podataka. Prva stvar koju ćemo uraditi pri pokretanju naše Redux aplikacije je da dobijemo podatke o proizvodima sa servera. Za to je potrebno da iz naše aplikacije pošaljemo GET zahtev. Hajde da ga obradimo na strani servera.

Otvorimo našu aplikaciju sa proizvodima, a u njoj datoteku server.js. Da bismo mogli da radimo sa HTTP zahtevima, potrebno je da u datoteku importujemo nekoliko alata iz msw, hajde da to uradimo:

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

Takođe, odmah ćemo napraviti izmene zbog realnosti, odnosno mogućih kašnjenja u mreži. Neka vrednost naše veštačke pauze bude 2 sekunde, kako bismo videli kako se podaci učitavaju. Napišimo je posle const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

A sada na kraju datoteke, pre izvoza radnika, kreiraćemo niz za API rukovaoce zahteva:

export const handlers = []

I zatim u uglastim zagradama napišimo prvi rukovalac za presretanje GET zahteva za proizvode:

export const handlers = [http.get()]

Kao prvi parametar za http.get prosledićemo neku lažnu adresu, na primer '/fakeServer/products', a kao drugi asinhroni callback:

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

Sada ćemo napisati kod za ovaj callback. Sa njegovom pomoću ćemo izvući sve proizvode iz baze podataka. Ovde ćemo takođe koristiti funkciju serializeProduct, čiji smo kod napisali na prethodnoj lekciji. Hajde da je prosledimo u map. Zatim ćemo napraviti pauzu (kao da mreža sporira) i vratiti u response objekte sa podacima o proizvodima u JSON formatu:

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

I na kraju. Napisali smo prvi handler za našeg radnika, hajde da tom radniku prosledimo niz handlers. Za to ćemo izmeniti poslednju liniju koda u datoteci na:

export const worker = setupWorker(...handlers)

Otvorite vašu aplikaciju sa studentima, a u njoj datoteku server.js. Importujte u datoteku navedene alate iz msw. Proučivši materijal ove lekcije, kreirajte prazan niz rukovalaca za presretanje zahteva. Napišite u njemu kod za rukovalac GET zahteva za studente. Kao putanja neka vam bude '/fakeServer/students'.

Na kraju datoteke ne zaboravite da prosledite niz rukovalaca handlers radniku.