Изпращане на данни от сървъра чрез GET заявка в Redux

И така, имаме база данни. Първото нещо, което ще направим при стартирането на нашето Redux приложение, е да получим данните за продуктите от сървъра. За целта трябва от нашето приложение да изпратим GET заявка. Нека я обработим от страна на сървъра.

Нека отворим нашето приложение с продукти, а в него файла server.js. За да работим с HTTP заявки, трябва да импортираме във файла няколко инструмента от msw, нека го направим:

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

Също така веднага нека направим корекции за реалната ситуация, тоест възможни забавяния в мрежата. Нека стойността на нашето изкуствено забавяне да бъде 2 секунди, за да видим как се зареждат данните. Нека я напишем след const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

А сега в края на файла, преди експорта на worker, ще създадем масив за API обработчици на заявки:

export const handlers = []

И след това в квадратните скоби ще напишем първия обработчик за прихващане на GET заявка за продукти:

export const handlers = [http.get()]

Като първи параметър на http.get ще подадем някакъв фалшив адрес, например '/fakeServer/products', а като втори - асинхронен callback:

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

Сега ще напишем кода за този callback. С негова помощ ще извлечем всички продукти от базата данни. Тук също ще използваме функцията serializeProduct, чийто код написахме в предишния урок. Нека я подадем в map. След това ще направим забавяне (все едно мрежата е бавна) и ще върнем в response обекти с данните за продуктите като 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)
	}),
]

И последно. Написахме първия handler за нашия worker, нека подадем на този worker масива handlers. За целта нека поправим последния ред код във файла на:

export const worker = setupWorker(...handlers)

Отворете вашето приложение със студенти, а в него файла server.js. Импортирайте във файла посочените инструменти от msw. След като изучите материала от този урок, създайте празен масив от обработчици за прихващане на заявки. Напишете в него код за обработчик на GET заявка за студенти. Като път нека имате '/fakeServer/students'.

В края на файла не забравяйте да подадете масива от обработчици handlers на worker-а.