Gửi dữ liệu từ máy chủ thông qua yêu cầu GET trong Redux

Vậy là chúng ta đã có cơ sở dữ liệu chứa dữ liệu. Điều đầu tiên chúng ta sẽ làm khi khởi chạy ứng dụng Redux của mình - đó là lấy dữ liệu về sản phẩm từ máy chủ. Để làm điều này, chúng ta cần gửi một yêu cầu GET từ ứng dụng của mình. Hãy xử lý nó ở phía máy chủ.

Hãy mở ứng dụng sản phẩm của chúng ta, và trong đó mở tệp server.js. Để có thể làm việc với các yêu cầu HTTP, chúng ta cần nhập khẩu vào tệp một số công cụ từ msw, hãy làm điều đó:

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

Đồng thời, hãy điều chỉnh cho phù hợp với thực tế, tức là những độ trễ mạng có thể xảy ra. Giá trị độ trễ nhân tạo của chúng ta sẽ là 2 giây, để chúng ta có thể thấy cách dữ liệu được tải. Hãy viết nó sau const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

Và bây giờ, ở cuối tệp trước khi xuất worker, hãy tạo một mảng cho các trình xử lý API xử lý các yêu cầu:

export const handlers = []

Và sau đó, trong dấu ngoặc vuông, hãy viết trình xử lý đầu tiên để chặn yêu cầu GET lấy sản phẩm:

export const handlers = [http.get()]

Tham số đầu tiên cho http.get chúng ta sẽ truyền một địa chỉ giả nào đó, ví dụ '/fakeServer/products', và tham số thứ hai là một hàm callback bất đồng bộ:

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

Bây giờ hãy viết mã cho callback này. Với sự trợ giúp của nó, chúng ta sẽ trích xuất tất cả sản phẩm từ cơ sở dữ liệu. Ở đây chúng ta cũng sẽ sử dụng hàm serializeProduct, mã mà chúng ta đã viết trong bài học trước. Hãy truyền nó vào map. Sau đó, tạo một độ trễ (giống như mạng bị chậm) và trả về trong response các đối tượng chứa dữ liệu sản phẩm dưới dạng 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)
	}),
]

Và cuối cùng. Chúng ta đã viết trình xử lý đầu tiên cho worker của mình, hãy chuyển cho worker đó mảng handlers. Để làm điều này, hãy sửa dòng mã cuối cùng trong tệp thành:

export const worker = setupWorker(...handlers)

Hãy mở ứng dụng về sinh viên của bạn, và trong đó mở tệp server.js. Nhập khẩu vào tệp các công cụ được chỉ định từ msw. Sau khi nghiên cứu tài liệu của bài học này, hãy tạo một mảng rỗng các trình xử lý để chặn các yêu cầu. Viết trong đó mã cho trình xử lý yêu cầu GET lấy sinh viên. Về đường dẫn, hãy đặt là '/fakeServer/students'.

Ở cuối tệp, đừng quên chuyển mảng trình xử lý handlers cho worker.