Wysyłanie danych z serwera za pomocą żądania GET w Redux

A więc mamy bazę danych. Pierwszą rzeczą, którą zrobimy przy uruchomieniu naszej aplikacji Redux - jest pobranie danych o produktach z serwera. W tym celu musimy z naszej aplikacji wysłać żądanie GET. Zajmijmy się jego obsługą po stronie serwera.

Otwórzmy naszą aplikację z produktami, a w niej plik server.js. Aby móc pracować z żądaniami HTTP, musimy zaimportować do pliku kilka narzędzi z msw, zróbmy to:

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

Również od razu uwzględnijmy realia, czyli możliwe opóźnienia w sieci. Niech wartość naszego sztucznego opóźnienia wynosi 2 sekundy, abyśmy widzieli jak ładują się dane. Napiszmy je po const PRODS_PER_SELLER = 2:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

A teraz na końcu pliku przed eksportem workera utwórzmy tablicę dla handlerów żądań API:

api/server.jsexport const handlers = []

I następnie w nawiasach kwadratowych napiszmy pierwszy handler do przechwytywania żądania GET produktów:

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

Pierwszym parametrem dla http.get przekażemy jakieś fałszywe adres, na przykład '/fakeServer/products', a drugim asynchroniczny callback:

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

Teraz napiszmy kod dla tego callback. Z jego pomocą wyodrębnimy wszystkie produkty z bazy danych. Tutaj również wykorzystamy funkcję serializeProduct, której kod napisaliśmy na poprzednich zajęciach. Przekażmy ją do map. Następnie zróbmy opóźnienie (jakby sieć zwalniała) i zwróćmy w response obiekty z danymi produktów w formacie 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)
  }),
]

I ostatnie. Napisaliśmy pierwszy handler dla naszego workera, przekażmy temu workerowi tablicę handlers. W tym celu poprawmy ostatnią linię kodu w pliku na:

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