Mengirim Data dari Server melalui Permintaan GET di Redux

Jadi kita memiliki database dengan data. Hal pertama yang akan kita lakukan saat menjalankan aplikasi Redux kita adalah mengambil data produk dari server. Untuk ini, kita perlu mengirim permintaan GET dari aplikasi kita. Mari kita tangani di sisi server.

Buka aplikasi produk kita, dan di dalamnya file server.js. Untuk bekerja dengan permintaan HTTP, kita perlu mengimpor beberapa alat dari msw ke file, mari kita lakukan ini:

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

Juga, mari kita sesuaikan dengan realitas, yaitu kemungkinan penundaan jaringan. Biarkan nilai penundaan buatan kita adalah 2 detik, agar kita bisa melihat bagaimana data dimuat. Tuliskan setelah const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

Dan sekarang di akhir file sebelum mengekspor worker, mari buat array untuk handler permintaan API:

export const handlers = []

Kemudian dalam kurung siku, tulis handler pertama untuk menangkap permintaan GET produk:

export const handlers = [http.get()]

Parameter pertama untuk http.get kita akan berikan alamat palsu, misalnya '/fakeServer/products', dan yang kedua adalah callback asinkron:

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

Sekarang tulis kode untuk callback ini. Dengan menggunakannya kita akan mengambil semua produk dari DB. Di sini kita juga akan menggunakan fungsi serializeProduct, yang kodenya kita tulis pada pelajaran sebelumnya. Mari kita berikan ke dalam map. Kemudian buat penundaan (seolah-olah jaringan lambat) dan kembalikan dalam response objek dengan data produk dalam bentuk JSON:

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

Dan yang terakhir. Kita telah menulis handler pertama untuk worker kita, mari berikan worker ini array handlers. Untuk ini, perbaiki baris kode terakhir di file menjadi:

export const worker = setupWorker(...handlers)

Buka aplikasi Anda dengan siswa, dan di dalamnya file server.js. Impor ke dalam file alat-alat yang ditentukan dari msw. Setelah mempelajari materi pelajaran ini, buatlah array kosong untuk handler penangkapan permintaan. Tulis di dalamnya kode untuk handler permintaan GET siswa. Sebagai path, biarkan Anda memiliki '/fakeServer/students'.

Di akhir file, jangan lupa untuk memberikan array handler handlers ke worker.