Instalasi msw untuk bekerja dengan bagian server di Redux

Pada pelajaran sebelumnya kita telah membuat beberapa perubahan tambahan dalam aplikasi kita. Sekarang kita perlu memahami server, yang akan digunakan aplikasi kita untuk bertukar data.

Kita tidak akan memiliki server yang sebenarnya, jadi kita hanya akan mensimulasikan kerja dengannya, menggunakan alat yang keren Mock Service Worker. Mock Service Worker (MSW) adalah alat untuk mensimulasikan API, yang menggunakan API Service Worker yang distandarisasi, dimaksudkan untuk mencegat permintaan pada tingkat jaringan. MSW akan menghasilkan tanggapan palsu (responses) terhadap permintaan (requests) kita. Dan, seperti yang diklaim oleh pengembang, alat ini sangat efektif dan fleksibel, sehingga setelah debugging dengan mock (yang dalam aplikasi tidak perlu dibuat khusus), aplikasi dapat dijalankan dengan server eksternal yang sebenarnya. Dokumentasi tentangnya cukup luas, dan, jika Anda tertarik dengan MSW, Anda dapat membacanya di situs web resmi.

Mari kita beralih ke instalasi msw. Untuk itu, buka proyek produk kita dan di terminal ketik:

npm install msw --save-dev

Untuk msw bekerja kita juga perlu membuat dan menyalin mockServiceWorker.js ke beberapa direktori publik. Seringkali ini adalah folder public. Kita memiliki folder kosong public, mari salin file tersebut ke sana. Untuk itu jalankan di terminal perintah dan kemudian setuju untuk menggunakan public:

npx msw init public

Sekarang lihatlah ke public, di sana seharusnya muncul skrip yang dihasilkan mockServiceWorker.js. Sekarang jalankan aplikasi produk kita dan di baris alamat browser ketik http://localhost:5173/mockServiceWorker.js (karena aplikasi kita berjalan di port 5173). Anda lihat di jendela browser menampilkan isi file mockServiceWorker.js? Berarti semuanya baik, kita lanjutkan.

Selanjutnya mari di folder src buat folder api, dan di dalamnya file server.js, di mana kita akan menulis kode server. Sekarang buka server.js dan impor fungsi setupWorker dari library msw yang diinstal:

import { setupWorker } from 'msw/browser'

Di bawah ini dalam file buat variabel worker dan ekspor:

export const worker = setupWorker()

Dan sekarang mari buka file main.jsx dan impor worker kita ke dalamnya:

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

Sekarang sambungkan ke aplikasi kita. Untuk itu, kode yang kita gunakan untuk membuat root aplikasi React kita, kita bungkus dalam fungsi, sebut saja main dan baris pertama tambahkan fungsi menjalankan untuk worker. Tentu saja jangan lupa untuk memanggil main itu sendiri. Kode lengkap setelah semua baris dengan impor sekarang akan terlihat seperti ini:

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

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

main()

Sekarang kita yakin, bahwa aplikasi kita tidak akan mulai bekerja lebih dulu (dan mengirim permintaan ;) ), daripada worker berjalan.

Mari jalankan aplikasi kita dan buka di browser konsol untuk pengembang. Jika Anda melihat teks '[MSW] Mocking enabled.' di dalamnya, maka Anda hebat dan telah menginstal semuanya dengan benar!!!

Buka aplikasi Anda dengan siswa. Setelah mempelajari materi pelajaran ini, instal Mock Service Worker untuk aplikasi Anda.

Buat file server.js, dan di dalamnya buat worker. Sambungkan worker ke aplikasi di main.js, seperti yang ditunjukkan dalam pelajaran. Pastikan semua berfungsi.