Obsługa żądania POST wysłanego za pomocą thunk w Redux

Otrzymaliśmy dane produktów i sprzedawców z serwera i wyświetliliśmy je w aplikacji. Ale za pomocą thunk można nie tylko otrzymywać, ale także wysyłać dane. Dowiedzmy się, jak to robić.

Po dodaniu nowego produktu, pozostaje on w naszym store, czyli wewnątrz naszej aplikacji. Zróbmy tak, aby nowy produkt zapisywał się na serwerze.

Zacznijmy od serwera. Tutaj będziemy musieli obsłużyć nie GET, a żądanie POST, ponieważ na serwer będą teraz napływać dane produktu, które właśnie tam zapiszemy.

Otwórzmy naszą aplikację z produktami, a w niej plik server.js. Znajdźmy w nim tablicę handlers i dodajmy do niej jeszcze jeden handler dla żądania POST. Tutaj będziemy przyjmować także body żądania, więc w callback musimy przekazać request:

http.post('/fakeServer/products', async ({ request }) => {})

Teraz w klamrach napiszmy kod naszego callbacka. Na początku wyodrębnijmy dane żądania i w przypadku błędu wyślijmy z serwera odpowiedź, że nie udało się zapisać danych i status 500:

http.post('/fakeServer/products', async ({ request }) => {
	const data = await request.json()

	if (data.content === 'error') {
		await delay(ARTIFICIAL_DELAY_MS)
		
		return new HttpResponse('server save error', {
			status: 500,
			headers: {
				'Content-Type': 'application/json',
			},
		})
	}
})

Jeśli z danymi wszystko w porządku, to w bazie danych znajdziemy sprzedawcę po id, który do nas przyszedł w żądaniu i wpiszemy tego sprzedawcę w data (dane sprzedawcy przecież u nas też przechowywane są na serwerze ;) ):

const seller = db.seller.findFirst({
	where: { id: { equals: data.seller } },
})
data.seller = seller

Następnie w bazie danych utwórzmy dla tego produktu obiekt z reakcjami. I teraz, mając wszystkie niezbędne pola dla produktu, utwórzmy w bazie i sam produkt:

data.reactions = db.reaction.create()
const product = db.product.create(data)

Ustawmy opóźnienie i w ostatniej linii kodu dla naszego callbacka zwróćmy odpowiedź z produktem:

await delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))

Na tym całkowicie zakończyliśmy z serwerem i więcej do niego nie wrócimy.

Nawiasem mówiąc, jeszcze jedna przydatna rzecz. Po linii export const worker = setupWorker(...handlers) możesz dodać następujący kod:

worker.listHandlers().forEach((handler) => {
	console.log(handler.info.header)
})

I teraz będziesz mógł zobaczyć wynik wywołania każdego handlera w konsoli przeglądarki.

Oczywiście nasz serwer nie jest prawdziwy i jeśli będziemy wymuszać odświeżanie strony w przeglądarce, to wszystkie nasze nowe obiekty z produktami znikną.

Otwórz twoją aplikację ze studentami. Otwórz w niej plik server.js. Dodaj do tablicy handlers obsługę żądania POST. W body tego żądania będziesz przyjmować dane nowego dodanego studenta.

W body callback dla twojego http.post wypakuj dane i w przypadku błędu wyślij odpowiednią odpowiedź.

Jeśli wszystko jest ok, to znajdź w bazie danych wykładowcę po otrzymanym id i wpisz go w dane. Wpisz także w dane, utworzony na podstawie bazy danych obiekt votes.

Na podstawie zebranych danych utwórz obiekt student z nowym studentem i wyślij go w odpowiedzi serwera.