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:

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

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

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

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

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

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)
  }),
]

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:

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