Адпраўка даных з сервера па 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)

Адчынiце ваша прыкладанне са студэнтамі, а ў ім файл server.js. Імпартуйце ў файл указаныя інструменты з msw. Вывучыўшы матэрыял данага ўрока, стварыце пусты масіў апрацоўшчыкаў для перахопу запытаў. Напішыце ў ім код для апрацоўшчыка GET-запыту студэнтаў. У якасці шляху хай у вас будзе '/fakeServer/students'.

У канцы файла не забудзьце перадаць масіў апрацоўшчыкаў handlers воркеру.