Redux'te GET İsteği ile Sunucudan Veri Gönderme

Böylece bir veri tabanımız var. Redux uygulamamızı başlattığımızda yapacağımız ilk şey, sunucudan ürün verilerini almaktır. Bunun için uygulamamızdan bir GET isteği göndermemiz gerekiyor. Haydi bu isteği sunucu tarafında işleyelim.

Ürün uygulamamızı açalım, içindeki server.js dosyasını açalım. HTTP istekleriyle çalışmak için, msw'den birkaç aracı dosyaya içe aktarmamız gerekiyor, haydi bunu yapalım:

import { http, HttpResponse, delay } from 'msw'

Ayrıca gerçekliğe, yani olası ağ gecikmelerine hemen düzeltmeler yapalım. Yapay gecikme değerimizin 2 saniye olmasına izin verin, böylece verilerin nasıl yüklendiğini görebiliriz. Onu const PRODS_PER_SELLER = 2'den sonra yazalım:

const ARTIFICIAL_DELAY_MS = 2000

Şimdi dosyanın sonunda, worker'ı dışa aktarmadan önce, API istek işleyicileri için bir dizi oluşturalım:

export const handlers = []

Ve sonra köşeli parantezler içinde ürünler için GET isteğini yakalama işleyicisini yazalım:

export const handlers = [http.get()]

http.get için ilk parametre olarak örneğin '/fakeServer/products' gibi sahte bir adres geçireceğiz, ikinci parametre olarak da eşzamansız bir geri çağırma işlevi:

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

Şimdi bu geri çağırma işlevi için kodu yazalım. Onun yardımıyla tüm ürünleri veri tabanından çıkaracağız. Burada, önceki derste yazdığımız serializeProduct işlevini de kullanacağız. Haydi onu map içine geçirelim. Sonra bir gecikme yapalım (sanki ağ yavaşlıyormuş gibi) ve response içinde ürün veri nesnelerini JSON olarak döndürelim:

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

Ve son olarak. Worker'ımız için ilk işleyiciyi yazdık, haydi bu worker'a handlers dizisini geçirelim. Bunun için dosyadaki son kod satırını şu şekilde düzeltelim:

export const worker = setupWorker(...handlers)

Öğrenci uygulamanızı açın, içindeki server.js dosyasını açın. Belirtilen araçları msw'den dosyaya içe aktarın. Bu dersin materyalini inceleyerek, istekleri yakalama işleyicileri için boş bir dizi oluşturun. İçinde öğrenciler için GET isteği işleyicisinin kodunu yazın. Yolunuz '/fakeServer/students' olsun.

Dosyanın sonunda, handlers dizisini worker'a geçirmeyi unutmayın.