Maʼlumotlarni serverdan GET-soʻrovi orqali Reduxga yuborish

Shunday qilib, bizda maʼlumotlar bazasi mavjud. Bizning Redux ilovamizni ishga tushirganimizda birinchi qiladigan ishimiz - bu serverdan mahsulotlar maʼlumotlarini olish. Buning uchun ilovamizdan GET-soʻrov yuborishimiz kerak. Keling, uni server tomonida qayta ishlaymiz.

Mahsulotlar bilan ishlaydigan ilovamizni ochamiz, uning ichidagi server.js faylini ochamiz. HTTP-soʻrovlari bilan ishlash uchun bizga msw dan bir nechta asboblarni faylga import qilish kerak, keling buni qilaylik:

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

Shuningdek, darhol real shartlarga, yaʼni tarmoqda imkoniy sekinliklarga tuzatish kiritamiz. Sunʼiy sekinlik qiymatimiz 2 soniya boʻlsin, shunda maʼlumotlar qanday yuklanishini koʻramiz. Uni const PRODS_PER_SELLER = 2 dan keyin yozamiz:

const ARTIFICIAL_DELAY_MS = 2000

Endi esa faylning oxirida worker ni eksport qilishdan oldin API soʻrovlari uchun qayta ishlovchilar massivini yaratamiz:

export const handlers = []

Va keyin kvadrat qavs ichida mahsulotlar uchun GET-soʻrovini ushlash uchun birinchi qayta ishlovchini yozamiz:

export const handlers = [http.get()]

http.get uchun birinchi parametr sifatida biz masalan '/fakeServer/products' kabi qalbazi manzilni, ikkinchi parametr sifatida esa asinxron callback funksiyasini beramiz:

export const handlers = [http.get('/fakeServer/products', async () => {})]

Endi shu callback uchun kod yozamiz. Uning yordamida biz Baza Dan barcha mahsulotlarni olamiz. Bu yerda biz oldingi darsda yozgan serializeProduct funksiyasidan ham foydalanamiz. Keling uni map ga oʻtkazamiz. Keyin sekinlikni amalga oshiramiz (xuddi tarmoq sekin ishlagandek) va response da maʼlumotlar obyektlarini JSON koʻrinishida qaytaramiz:

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

Va oxirgi narsa. Biz workerimiz uchun birinchi handler ni yozdik, keling bu worker ga handlers massivini oʻtkazamiz. Buning uchun fayldagi oxirgi qatorni quyidagicha oʻzgartiramiz:

export const worker = setupWorker(...handlers)

Talabalar bilan ishlaydigan ilovingizni oching, uning ichidagi server.js faylini oching. msw dan koʻrsatilgan asboblarni faylga import qiling. Ushbu dars materialini oʻrgangan holda, soʻrovlarni ushlash uchun boʻsh qayta ishlovchilar massivini yarating. Unga talabalar uchun GET-soʻrovini qayta ishlovchi kodni yozing. Yoʻl sifatida '/fakeServer/students' boʻlsin.

Fayl oxirida handlers massivini worker ga oʻtkazishni unutmang.