Cài đặt msw để làm việc với phần server trong Redux

Trong các bài học trước, chúng ta đã thực hiện một số thay đổi bổ sung trong ứng dụng của mình. Bây giờ chúng ta cần tìm hiểu về server, mà ứng dụng của chúng ta sẽ trao đổi dữ liệu cùng.

Chúng ta sẽ không có một server thực sự, vì vậy chúng ta chỉ cần mô phỏng việc làm việc với nó, sử dụng một công cụ tuyệt vời Mock Service Worker. Mock Service Worker (MSW) là một công cụ để mô phỏng API, sử dụng API tiêu chuẩn hóa của Service Worker, được thiết kế để chặn các yêu cầu ở cấp độ mạng. MSW sẽ tạo ra các phản hồi giả (responses) cho các yêu cầu (requests) của chúng ta. Hơn nữa, như các nhà phát triển khẳng định, công cụ này rất hiệu quả và linh hoạt, đến mức sau khi gỡ lỗi với các mock (mà không cần tạo ra bất cứ thứ gì đặc biệt trong ứng dụng), ứng dụng có thể được đưa vào hoạt động với một server bên ngoài thực sự. Tài liệu về nó khá rộng, và nếu bạn quan tâm đến MSW, bạn có thể đọc nó trên trang web chính thức.

Hãy chuyển sang việc cài đặt msw. Để làm điều này, hãy mở dự án sản phẩm của chúng ta và trong terminal nhập:

npm install msw --save-dev

Để msw hoạt động, chúng ta cũng cần tạo và sao chép mockServiceWorker.js vào một thư mục công khai nào đó. Thường đó là thư mục public. Chúng ta có một thư mục trống public, hãy sao chép nó vào đó. Để làm điều này, hãy chạy trong terminal lệnh và sau đó đồng ý sử dụng public:

npx msw init public

Bây giờ hãy xem public, ở đó phải xuất hiện script được tạo mockServiceWorker.js. Bây giờ hãy chạy ứng dụng sản phẩm của chúng ta và trong thanh địa chỉ của trình duyệt nhập http://localhost:5173/mockServiceWorker.js (vì ứng dụng của chúng ta chạy trên cổng 5173). Bạn có thấy trong cửa sổ trình duyệt hiển thị nội dung của tệp mockServiceWorker.js không? Điều đó có nghĩa là mọi thứ đều tốt, hãy tiếp tục.

Tiếp theo, hãy trong thư mục src tạo thư mục api, và trong đó tạo tệp server.js, trong đó chúng ta sẽ viết mã server. Bây giờ hãy mở server.js và import hàm setupWorker từ thư viện msw đã cài đặt:

import { setupWorker } from 'msw/browser'

Bên dưới trong tệp, hãy tạo biến worker và export nó:

export const worker = setupWorker()

Và bây giờ hãy mở tệp main.jsx và import worker của chúng ta vào đó:

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

Bây giờ hãy kết nối nó với ứng dụng của chúng ta. Để làm điều này, mã mà chúng ta sử dụng để tạo gốc của ứng dụng React của chúng ta, chúng ta sẽ bọc nó trong một hàm, gọi nó là main và dòng đầu tiên thêm vào đó hàm khởi động cho worker. Tất nhiên đừng quên gọi chính main. Mã đầy đủ sau tất cả các dòng với import bây giờ sẽ trông như thế này:

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

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

main()

Bây giờ chúng ta chắc chắn rằng ứng dụng của mình sẽ không bắt đầu hoạt động trước (và gửi các yêu cầu ;) ), khi worker được khởi động.

Hãy khởi động ứng dụng của chúng ta và mở trong trình duyệt bảng điều khiển dành cho nhà phát triển. Nếu bạn thấy trong đó văn bản '[MSW] Mocking enabled.', thì bạn thật tuyệt vời và đã cài đặt mọi thứ chính xác!!!

Mở ứng dụng sinh viên của bạn. Sau khi tìm hiểu tài liệu của bài học này, hãy cài đặt Mock Service Worker cho ứng dụng của bạn.

Tạo tệp server.js, và trong đó tạo worker. Kết nối worker với ứng dụng trong main.js, như được hiển thị trong bài học. Đảm bảo rằng mọi thứ hoạt động.