Redux'ta thunk ile gönderilen POST isteğinin işlenmesi

Ürün ve satıcı verilerini sunucudan aldık ve uygulamada görüntüledik. Ancak thunk kullanarak sadece veri almakla kalmayıp, veri de gönderebiliriz. Bunun nasıl yapılacağını öğrenelim.

Yeni bir ürün ekledikten sonra, bu ürün store'umuzda, yani uygulamamızın içinde kalıyor. Şimdi yeni ürünün sunucuda da kaydedilmesini sağlayalım.

Sunucudan başlayalım. Burada artık GET değil, POST isteğini işlememiz gerekecek, çünkü sunucuya artık kaydedeceğimiz ürün verileri gelecek.

Ürün uygulamamızı açalım ve içindeki server.js dosyasını bulalım. İçindeki handlers dizisini bulup POST isteği için bir işleyici daha ekleyelim. Burada istek gövdesini de alacağımız için callback içine request'i geçirmeliyiz:

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

Şimdi süslü parantezler içinde callback fonksiyonumuzun kodunu yazalım. Öncelikle istek verilerini çıkaralım ve bir hata olması durumunda sunucudan verileri kaydedemediğimizi belirten ve 500 durum kodlu bir yanıt gönderelim:

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',
			},
		})
	}
})

Eğer verilerde sorun yoksa, veritabanında bize gelen id'ye göre satıcıyı bulacağız ve bu satıcıyı data'ya yazacağız (satıcı verileri de bizim sunucumuzda saklanıyor sonuçta ;) ):

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

Daha sonra veritabanında bu ürün için reaksiyon nesnesi oluşturacağız. Ve şimdi, ürün için gerekli tüm alanlara sahip olarak, veritabanında ürünün kendisini de oluşturalım:

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

Gecikmeyi ekleyelim ve callback fonksiyonumuzun son satırında ürünle birlikte bir yanıt döndürelim:

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

Böylece sunucu kısmını tamamen bitirdik ve bir daha dönmeyeceğiz.

Bu arada, bir başka yararlı şey. export const worker = setupWorker(...handlers) satırından sonra şu kodu ekleyebilirsiniz:

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

Ve artık her işleyicinin tetiklenme sonucunu tarayıcı konsolunda görebileceksiniz.

Tabii ki sunucumuz gerçek değil ve tarayıcıda sayfayı zorla yenilersek, tüm yeni ürün nesnelerimiz kaybolacak.

Öğrenci uygulamanızı açın. İçindeki server.js dosyasını açın. handlers dizisine POST isteği işlemi ekleyin. Bu isteğin gövdesinde yeni eklenen öğrencinin verilerini alacaksınız.

http.post callback'inizin gövdesinde verileri açın ve hata durumunda uygun bir yanıt gönderin.

Eğer her şey yolundaysa, veritabanında alınan id'ye göre öğretmeni bulun ve verilere yazın. Ayrıca veritabanı temel alınarak oluşturulmuş votes nesnesini de verilere yazın.

Toplanan verilerle yeni bir öğrenci içeren student nesnesi oluşturun ve sunucu yanıtında geri gönderin.