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:

api/server.jsimport { 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:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

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

api/server.jsexport const handlers = []

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

api/server.jsexport 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:

api/server.jsexport 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:

api/server.jsexport 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:

api/server.jsexport const worker = setupWorker(...handlers)