Skicka data från servern via GET-förfrågan i Redux

Så vi har en databas med data. Det första vi kommer att göra när vi startar vår Redux applikation är att hämta produktdata från servern. För att göra detta måste vi från vår applikation skicka en GET-förfrågan. Låt oss hantera den på serversidan.

Öppna vår produktapplikation, och i den filen server.js. För att kunna arbeta med HTTP-förfrågningar behöver vi importera några verktyg från msw till filen, låt oss göra det:

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

Låt oss också omedelbart justera för verkligheten, det vill säga möjliga nätverksfördröjningar. Låt vårt artificiella fördröjningsvärde vara 2 sekunder så att vi kan se hur datan laddas. Låt oss skriva det efter const PRODS_PER_SELLER = 2:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

Och nu, i slutet av filen före exporten av workern, skapar vi en array för API- hanterare av förfrågningar:

api/server.jsexport const handlers = []

Och sedan inom hakparenteserna skriver vi den första hanteraren för att avlyssna GET-förfrågan för produkter:

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

Som första parameter till http.get skickar vi en falsk adress, till exempel '/fakeServer/products', och som andra en asynkron callback:

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

Nu skriver vi koden för denna callback. Med dess hjälp kommer vi att extrahera alla produkter från databasen. Här kommer vi också att använda funktionen serializeProduct, vars kod vi skrev förra lektionen. Låt oss skicka den till map. Sedan skapar vi en fördröjning (som om nätverket är segt) och returnerar i response objekten med produktdata som 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)
  }),
]

Och sist. Vi har skrivit den första hanteraren för vår worker, låt oss skicka arrayen handlers till denna worker. För att göra detta korrigerar vi den sista kodraden i filen till:

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