Menghantar Data dari Pelayan melalui Permintaan GET dalam Redux

Jadi kita mempunyai pangkalan data dengan data. Perkara pertama yang akan kita lakukan apabila menjalankan aplikasi Redux kita ialah mendapatkan data produk dari pelayan. Untuk ini, kita perlu menghantar permintaan GET dari aplikasi kita. Mari kita uruskannya di sebelah pelayan.

Buka aplikasi produk kami, dan di dalamnya fail server.js. Untuk berurusan dengan permintaan HTTP, kita perlu mengimport beberapa alat dari msw ke dalam fail, mari lakukan ini:

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

Juga, mari kita segera membuat pelarasan untuk realiti, iaitu kelewatan rangkaian yang mungkin. Biarkan nilai kelewatan buatan kita ialah 2 saat, supaya kita dapat melihat bagaimana data dimuatkan. Mari tulis selepas const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

Dan sekarang, di hujung fail sebelum mengeksport worker, mari kita buat array untuk pengendali permintaan API:

export const handlers = []

Kemudian, dalam kurungan segi empat, tulis pengendali pertama untuk menangkap permintaan GET produk:

export const handlers = [http.get()]

Sebagai parameter pertama untuk http.get, kita akan hantar alamat palsu, contohnya '/fakeServer/products', dan yang kedua, callback tak segerak:

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

Sekarang tulis kod untuk callback ini. Dengan menggunakannya, kita akan ekstrak semua produk dari Pangkalan Data. Di sini kita juga akan menggunakan fungsi serializeProduct, kod yang kami tulis dalam pelajaran lepas. Mari kita hantar ia ke dalam map. Kemudian buat kelewatan (seolah-olah rangkaian perlahan) 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 akhirnya. Kami telah menulis pengendali pertama untuk worker kami, mari kita hantar array handlers kepada worker ini. Untuk ini, betulkan baris terakhir kod dalam fail kepada:

export const worker = setupWorker(...handlers)

Buka aplikasi anda dengan pelajar, dan di dalamnya fail server.js. Import ke dalam fail alat yang dinyatakan dari msw. Setelah mempelajari bahan pelajaran ini, buat array kosong pengendali untuk menangkap permintaan. Tulis di dalamnya kod untuk pengendali permintaan GET pelajar. Sebagai laluan, biarkan ia '/fakeServer/students'.

Di hujung fail, jangan lupa untuk menghantar array pengendali handlers kepada worker.