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:

api/server.jsimport { 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:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

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

api/server.jsexport const handlers = []

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

api/server.jsexport const handlers = [http.get()]

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

api/server.jsexport 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:

api/server.jsexport 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:

api/server.jsexport const worker = setupWorker(...handlers)