Дода намудани маълумот аз сервер бо дархости 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-ро ба воркер бифиристем.