Изпращане на данни от сървъра чрез GET заявка в Redux

И така, имаме база данни. Първото нещо, което ще направим при стартирането на нашето Redux приложение, е да получим данните за продуктите от сървъра. За целта трябва от нашето приложение да изпратим GET заявка. Нека я обработим от страна на сървъра.

Нека отворим нашето приложение с продукти, а в него файла server.js. За да работим с HTTP заявки, трябва да импортираме във файла няколко инструмента от msw, нека го направим:

api/server.jsimport { http, HttpResponse, delay } from 'msw'

Също така веднага нека направим корекции за реалната ситуация, тоест възможни забавяния в мрежата. Нека стойността на нашето изкуствено забавяне да бъде 2 секунди, за да видим как се зареждат данните. Нека я напишем след const PRODS_PER_SELLER = 2:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

А сега в края на файла, преди експорта на worker, ще създадем масив за API обработчици на заявки:

api/server.jsexport const handlers = []

И след това в квадратните скоби ще напишем първия обработчик за прихващане на GET заявка за продукти:

api/server.jsexport const handlers = [http.get()]

Като първи параметър на http.get ще подадем някакъв фалшив адрес, например '/fakeServer/products', а като втори - асинхронен callback:

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

Сега ще напишем кода за този callback. С негова помощ ще извлечем всички продукти от базата данни. Тук също ще използваме функцията serializeProduct, чийто код написахме в предишния урок. Нека я подадем в map. След това ще направим забавяне (все едно мрежата е бавна) и ще върнем в response обекти с данните за продуктите като JSON:

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

И последно. Написахме първия handler за нашия worker, нека подадем на този worker масива handlers. За целта нека поправим последния ред код във файла на:

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