Zpracování POST požadavku odeslaného pomocí thunk v Redux

Získali jsme data produktů a prodejců ze serveru a zobrazili je v aplikaci. Pomocí thunk však lze nejen získávat, ale také odesílat data. Pojďme se podívat, jak na to.

Poté, co přidáme nový produkt, zůstane nám v store, tedy uvnitř naší aplikace. Udělejme to tak, aby se nový produkt uložil na server.

Začněme se serverem. Zde již budeme muset zpracovat nikoli GET, ale POST požadavek, protože na server nyní budou přicházet data produktu, která tam budeme ukládat.

Otevřeme naši aplikaci s produkty a v ní soubor server.js. Najdeme v něm pole handlers a přidejme do něj další obslužnou rutinu pro POST požadavek. Zde budeme přijímat také tělo požadavku, proto do callbacku musíme předat request:

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

Nyní do složených závorek napíšeme kód našeho callbacku. Nejprve extrahujme data požadavku a v případě chyby odešleme ze serveru odpověď, že se nám nepodařilo uložit data a 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',
			},
		})
	}
})

Pokud jsou data v pořádku, pak v databázi najdeme prodejce podle id, které nám přišlo v požadavku, a zapíšeme tohoto prodejce do data (data prodejce přece máme také uložena na serveru ;) ):

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

Dále v databázi vytvoříme pro tento produkt objekt s reakcemi. A nyní, když máme všechna potřebná pole pro produkt, vytvoříme v databázi i samotný produkt:

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

Nastavíme zpoždění a na posledním řádku kódu pro náš callback vrátíme odpověď s produktem:

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

Tím jsme kompletně dokončili se serverem a už se k němu nevracíme.

Mimochodem, další užitečná věc. Za řádek export const worker = setupWorker(...handlers) můžete přidat následující kód:

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

A nyní můžete vidět výsledek spuštění každé obslužné rutiny v konzoli prohlížeče.

Samozřejmě náš server není skutečný a pokud budeme stránku v prohlížeči nuceně obnovovat, všechny naše nové objekty s produkty zmizí.

Otevřete vaši aplikaci se studenty. Otevřete v ní soubor server.js. Přidejte do pole handlers zpracování POST požadavku. V těle tohoto požadavku budete přijímat data nově přidaného studenta.

V těle callbacku pro váš http.post rozbalte data a v případě chyby odešlete odpovídající odpověď.

Pokud je vše v pořádku, pak v databázi vyhledejte učitele podle získaného id a zapište ho do dat. Zapište také do dat objekt votes vytvořený na základě databáze.

Ze shromážděných dat vytvořte objekt student s novým studentem a odešlete ho v odpovědi serveru.