Redux да серверидан GET-сўров орқали маълумотлар юбориш

Шунинг учун бизда маълумотлар базаси мавжуд. Бизнинг Redux иловамизни ишга туширганимизда биринчи бўлиб қиладиган иш - бу сервердан махсулотлар билан маълумотларни олиш. Буни амалга ошириш учун биз иловамиздан GET-сўров юборишимиз керак. Келинг, уни сервер томонида қайта ишлаймиз.

Махсулотлар билан иловамизни очайлик, ундаги server.js файлини ochamiz. HTTP-сўровлар билан ишлаш учун бизга msw дан бир нечта асбобларни файлга импорт қилиш керак, келинг, буни амалга оширамиз:

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

Шунингдек, дастлабки ҳолда реалликка, яъни тармокдаги имкониятли кечиктиришларга ту́зaтишлар киритамиз. Сунъий кечиктириш қийматимиз 2 сония бўлсин, шунинг учун биз маълумотлар қандай юкланayotганини кўрамиз. Уни const PRODS_PER_SELLER = 2 дан кейин ѕзамиз:

const ARTIFICIAL_DELAY_MS = 2000

Энди esa файлнинг охирида воркерни экспорт қилишдан олдин API сўровларнинг обработчиклари учун массив ochamiz:

export const handlers = []

Сўнгра квадрат қавс ичида махсулотлар учун GET-сўровни ушлаш учун биринчи обработчикни ѕзамиз:

export const handlers = [http.get()]

http.get учун биринчи параметр сифатида биз бирор фейк манзилни, масалан '/fakeServer/products' ни ўтказамиз, иккинчиси esa асинхрон 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 массивини ўтказамиз. Буни амалга ошириш учун файлдаги oxirги сатрни ту́затамиз:

export const worker = setupWorker(...handlers)

Сизнинг студентлар билан иловангизни oching, ундаги server.js файлини oching. Файлга кўрсатилган msw асбобларини импорт қилинг. Ушбу дарс материалларини ўрганиб чиққан ҳолда, сўровларни ушлаш учун бўш обработчиклар массивини яратинг. Унда студентлар учун GET-сўровни қайта ишлаш учун кодни ѕзинг. Йўл сифатида сизда '/fakeServer/students' бўлсин.

Файлнинг охирида handlers массивини воркерга ўтказишни унутмангиз.