Испраќање на податоци од серверот преку 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

А сега на крајот од датотеката пред експортот на работникот да креираме низа за 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 за нашиот работник, ајде да му го пренесеме на овој работник низата handlers. За ова да ја исправиме последната линија од кодот во датотеката на:

export const worker = setupWorker(...handlers)

Отворете ја вашата апликација со студенти, а во неа датотеката server.js. Импортирајте во датотеката наведените алатки од msw. Проучувајќи го материјалот од овој урок, креирајте празна низа обработувачи за пресретнување на барања. Напишете во неа код за обработувач на GET-барање за студенти. Како патека нека биде '/fakeServer/students'.

На крајот од датотеката не заборавајте да го пренесете низата обработувачи handlers на работникот.