Redux'ta Sunucu Tarafı Çalışması için MSW Kurulumu

Önceki derslerde uygulamamızda birkaç ek değişiklik yaptık. Şimdi, uygulamamızın veri alışverişi yapacağı sunucuyla ilgilenmemiz gerekiyor.

Gerçek bir sunucumuz olmayacak, bu yüzden harika bir araç olan Mock Service Worker'ı kullanarak onunla çalışmayı taklit edeceğiz. Mock Service Worker (MSW), ağ düzeyinde istekleri kesmek için tasarlanmış standart bir API olan Service Worker API'sini kullanan bir API taklit aracıdır. MSW, isteklerimize (requests) sahte yanıtlar (responses) oluşturacak. Üstelik, geliştiricilerin iddiasına göre, araç o kadar etkili ve esnek ki (uygulamada özel olarak bir şey oluşturulması gerekmeyen) sahte verilerle hata ayıklaması yapıldıktan sonra, uygulama artık gerçek bir harici sunucuyla çalıştırılabilir. Belgeleri oldukça kapsamlıdır ve eğer MSW ile ilgilenirseniz, resmi web sitesinden okuyabilirsiniz.

Hadi msw'yi kurmaya geçelim. Bunun için ürünler projemizi açalım ve terminale şunu girelim:

npm install msw --save-dev

msw'nin çalışması için ayrıca bir mockServiceWorker.js dosyası oluşturmamız ve bunu herkese açık bir dizine kopyalamamız gerekiyor. Genellikle bu public klasörüdür. Bizim boş bir public klasörümüz var, hadi onu oraya kopyalayalım. Bunun için terminalde şu komutu çalıştırın ve ardından public kullanımını kabul edin:

npx msw init public

Şimdi public klasörüne bir göz atalım, orada oluşturulmuş mockServiceWorker.js betiği görünmelidir. Şimdi ürünler uygulamamızı çalıştıralım ve tarayıcının adres çubuğuna http://localhost:5173/mockServiceWorker.js yazalım (uygulamamız 5173 portunda çalıştığı için). Tarayıcı penceresinde mockServiceWorker.js dosyasının içeriğinin görüntülendiğini görüyor musunuz? O zaman harika, devam edelim.

Sonra, src klasöründe bir api klasörü oluşturalım ve içinde sunucu kodunu yazacağımız server.js dosyasını oluşturalım. Şimdi server.js dosyasını açalım ve kurulu msw kütüphanesinden setupWorker fonksiyonunu içe aktaralım:

import { setupWorker } from 'msw/browser'

Aşağıda dosyada worker değişkenini oluşturalım ve dışa aktaralım:

export const worker = setupWorker()

Şimdi hadi main.jsx dosyasını açalım ve içine worker'ımızı içe aktaralım:

import { worker } from './api/server'

Şimdi onu uygulamamıza bağlayalım. Bunun için React uygulamamızın kökünü oluşturduğumuz kodu, bir fonksiyonun içine saracağız, ona main adını verelim ve içine worker'ı başlatma fonksiyonunu ilk satır olarak ekleyelim. Tabii ki main fonksiyonunu çağırmayı da unutmayalım. Tüm içe aktarma satırlarından sonraki tam kod artık şöyle görünecek:

async function main() {
	await worker.start({ onUnhandledRequest: 'bypass' })

	ReactDOM.createRoot(document.getElementById('root')).render(
		<React.StrictMode>
			<Provider store={store}>
				<App />
			</Provider>
		</React.StrictMode>
	)
}

main()

Artık uygulamamızın worker başlamadan önce (ve istek göndermeye başlamadan ;) ) çalışmaya başlamayacağından eminiz.

Hadi uygulamamızı çalıştıralım ve tarayıcıda geliştirici konsolunu açalım. Eğer onda '[MSW] Mocking enabled.' yazısını görüyorsanız, o zaman harikasınız ve her şeyi doğru kurdunuz!!!

Öğrencilerle ilgili uygulamanızı açın. Bu dersin materyalini inceledikten sonra, uygulamanız için Mock Service Worker'ı kurun.

server.js dosyasını oluşturun ve içinde bir worker oluşturun. Worker'ı derste gösterildiği gibi uygulamaya main.js dosyasında bağlayın. Her şeyin çalıştığından emin olun.