Redux-də GET sorğusu ilə serverdən məlumat göndərmək

Beləliklə, bizim məlumat bazamız var. Bizim Redux tətbiqimizi işə saldıqda edəcəyimiz ilk şey serverdən məhsul məlumatlarını almaq olacaq. Bunun üçün tətbiqimizdən GET sorğusu göndərməliyik. Gəlin onu server tərəfində emal edək.

Məhsullarla olan tətbiqimizi açaq, onda server.js faylını açaq. HTTP sorğuları ilə işləmək üçün bizə msw-dən bir neçə alət lazımdır, gəlin onları idxal edək:

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

Həmçinin dərhal reallığa, yəni şəbəkədə mümkün gecikmələrə düzəliş edək. Süni gecikmə dəyərimiz 2 saniyə olsun ki, məlumatların necə yükləndiyini görək. Onu const PRODS_PER_SELLER = 2-dən sonra yazaq:

const ARTIFICIAL_DELAY_MS = 2000

İndi isə faylın sonunda worker-i ixrac etməzdən əvvəl API sorğu işləyiciləri üçün massiv yaradaq:

export const handlers = []

Sonra isə kvadrat mötərizələrin içində məhsullar üçün GET sorğusunu əvəz etmək üçün ilk işləyicini yazaq:

export const handlers = [http.get()]

http.get üçün ilk parametr kimi bəzi saxta ünvanı, məsələn '/fakeServer/products', ikinci parametr kimi isə asinxron callback ötürəcəyik:

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

İndi bu callback üçün kodu yazaq. Onun köməyi ilə biz bütün məhsulları DB-dən çıxaracayıq. Burada biz əvvəlki dərsdə yazdığımız serializeProduct funksiyasından da istifadə edəcəyik. Gəlin onu map-ə ötürək. Sonra gecikmə edək (sanki şəbəkə ləngiyir) və response-də məhsul məlumatları obyektlərini JSON formatında qaytaraq:

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

Və sonuncu. Biz workerimiz üçün ilk handleri yazdıq, gəlin bu worker-ə handlers massivini ötürək. Bunun üçün fayldakı son kod sətrini belə dəyişək:

export const worker = setupWorker(...handlers)

Tələbələrlə olan tətbiqinizi açın, onda server.js faylını açın. msw-dən göstərilən alətləri fayla idxal edin. Bu dərsin materialını öyrənərək, sorğuların əvəz edilməsi üçün boş işləyici massivi yaradın. Onda tələbələr üçün GET sorğusunun işləyicisi üçün kodu yazın. Yol kimi '/fakeServer/students' olsun.

Faylın sonunda handlers massivini worker-ə ötürməyi unutmayın.