Деректерді серверден 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 массивін воркерге беруді ұмытпаңыз.