Datu sūtīšana no servera pēc GET pieprasījuma Redux

Tātad mums ir datu bāze. Pirmā lieta, ko mēs darīsim, palaižot mūsu Redux lietotni, ir iegūt produktu datus no servera. Lai to izdarītu, mums no mūsu lietotnes ir jāsūta GET pieprasījums. Apstrādāsim to servera pusē.

Atvērsim mūsu produktu lietotni, un tajā failu server.js. Lai strādātu ar HTTP pieprasījumiem, mums jāimportē failā vairāki instrumenti no msw, darīsim to:

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

Arī uzreiz veiksim labojumus realitātei, tas ir, iespējamos tīkla aizkaves. Lai mūsu mākslīgās aizkaves vērtība būtu 2 sekundes, lai mēs redzētu, kā ielādējas dati. Uzrakstīsim to pēc const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

Un tagad faila beigās pirms eksportēšanas izveidosim masīvu API pieprasījumu apstrādātājiem:

export const handlers = []

Un tad kvadrātiekavās uzrakstīsim pirmo apstrādātāju GET pieprasījuma pārtveršanai produktiem:

export const handlers = [http.get()]

Pirmo parametru http.get mēs padodam kādu viltus adresi, piemēram '/fakeServer/products', un otro asinhrono callback:

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

Tagad uzrakstīsim kodu šim callback. Ar tā palīdzību mēs iegūsim visus produktus no datu bāzes. Šeit mēs arī izmantosim funkciju serializeProduct, kuras kodu mēs uzrakstījām iepriekšējā nodarbībā. Padodam to map. Pēc tam veiksim aizkavi (it kā tīkls lēnām strādā) un atgriezīsim response objektus ar produktu datiem JSON formātā:

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

Un pēdējais. Mēs uzrakstījām pirmo handler mūsu workerim, padodam šim workerim masīvu handlers. Lai to izdarītu, labojam pēdējo koda rindu failā uz:

export const worker = setupWorker(...handlers)

Atveriet savu studentu lietotni, un tajā failu server.js. Importējiet failā norādītos instrumentus no msw. Izpētījuši šīs nodarbības materiālu, izveidojiet tukšu apstrādātāju masīvu pieprasījumu pārtveršanai. Uzrakstiet tajā kodu studentu GET pieprasījuma apstrādātājam. Kā ceļu izmantojiet '/fakeServer/students'.

Faila beigās neaizmirstiet padot apstrādātāju masīvu handlers workerim.