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:

import { 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:

const ARTIFICIAL_DELAY_MS = 2000

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

export const handlers = []

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

export const handlers = [http.get()]

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

export 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:

export 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:

export const worker = setupWorker(...handlers)

Otwórz swoją aplikację ze studentami, a w niej plik server.js. Zaimportuj do pliku wskazane narzędzia z msw. Po zapoznaniu się z materiałem tej lekcji, utwórz pustą tablicę handlerów do przechwytywania żądań. Napisz w niej kod dla handlera żądania GET studentów. Jako ścieżkę niech będzie '/fakeServer/students'.

Na końcu pliku nie zapomnij przekazać tablicy handlerów handlers workerowi.