Trimiterea datelor de la server prin cerere GET în Redux

Deci avem o bază de date cu date. Primul lucru pe care îl vom face la pornirea aplicației noastre Redux este să primim datele despre produse de la server. Pentru aceasta, trebuie să trimitem o cerere GET din aplicația noastră. Să o procesăm pe partea de server.

Deschideți aplicația noastră cu produsele, iar în ea fișierul server.js. Pentru a lucra cu cererile HTTP, trebuie să importăm în fișier câteva instrumente din msw, să facem asta:

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

De asemenea, să facem imediat corecții pentru realitate, adică posibile întârzieri în rețea. Fie valoarea întârzierii noastre artificiale 2 secunde, pentru a vedea cum se încarcă datele. Să o scriem după const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

Și acum la sfârșitul fișierului înainte de exportul worker-ului să creăm un array pentru handler-ele de cereri API:

export const handlers = []

Apoi în parantezele pătrate să scriem primul handler pentru interceptarea cererii GET pentru produse:

export const handlers = [http.get()]

Primul parametru pentru http.get îi vom transmite o adresă falsă, de exemplu '/fakeServer/products', iar al doilea un callback asincron:

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

Acum să scriem codul pentru acest callback. Cu ajutorul lui vom extrage toate produsele din baza de date. Aici vom folosi și funcția serializeProduct, al cărei cod l-am scris la lecția trecută. Să o transmitem în map. Apoi să facem o întârziere (ca și cum rețeaua ar fi lentă) și să returnăm în response obiectele cu datele produselor sub formă de 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)
	}),
]

Și ultimul lucru. Am scris primul handler pentru worker-ul nostru, să transmitem acestui worker array-ul handlers. Pentru aceasta, să corectăm ultimul rând de cod din fișier cu:

export const worker = setupWorker(...handlers)

Deschideți aplicația dvs. cu studenții, iar în ea fișierul server.js. Importați în fișier instrumentele indicate din msw. După ce ați studiat materialul acestei lecții, creați un array gol de handler-e pentru interceptări de cereri. Scrieți în el codul pentru handler-ul cererii GET pentru studenți. Ca și cale, să aveți '/fakeServer/students'.

La sfârșitul fișierului nu uitați să transmiteți array-ul de handler-e handlers worker-ului.