Thêm Dữ Liệu với Phương Thức action trong React Router

Trong bài học này, chúng ta sẽ làm quen với phương thức action của đối tượng route. Phương thức này được gọi khi ứng dụng gửi một HTTP request loại POST, PUT, PATCH hoặc DELETE (không phải GET) tới route của bạn.

Đầu tiên, hãy import hàm tạo sản phẩm mà chúng ta đã viết trong bài học trước vào root.jsx của chúng ta:

import { createProduct } from '../forStorage';

Bây giờ chúng ta cần tạo một hàm action, mà React Router sẽ gọi khi nhấp vào nút thêm sản phẩm, hãy đặt nó sau hàm loader:

export async function action() {
	const product = await createProduct();
	return { product };
}

Hãy mở main.jsx và import action:

import Root, {
	loader as rootLoader,
	action as rootAction
} from './routes/root';

Và đặt nó làm giá trị của phương thức action cho đối tượng route. Component Form sẽ không cho phép trình duyệt gửi request lên server khi nhấn nút, mà sẽ gọi đến phương thức action của route của chúng ta. Đó là cách hoạt động thú vị của định tuyến phía máy khách với React Router:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		loader: rootLoader,
		action: rootAction,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},
	
]);

Hãy khởi chạy ứng dụng của chúng ta. Mở tab 'Ứng dụng' (Application cho Chrome) trên bảng điều khiển nhà phát triển, trong số các loại bộ nhớ khác nhau, hãy nhấp vào indexedDB, ở đây chúng ta quan tâm đến localforage. Bây giờ, khi nhấp vào nút thêm sản phẩm trong ứng dụng của chúng ta và làm mới bộ nhớ localforage sau mỗi lần nhấp, chúng ta thấy rằng trong keyvaluepairs, mảng products có thêm các đối tượng với các id khác nhau. Chiến thắng!!! Điều này có nghĩa là các bản ghi đang được tạo trong bộ nhớ của chúng ta! Tất nhiên danh sách trong ứng dụng của chúng ta cũng được bổ sung. Gợi ý: đừng quên dọn dẹp dữ liệu đã lưu của trang này sau đó trên tab 'Storage' trong Application.

Lấy ứng dụng bạn đã tạo trong các nhiệm vụ của các bài học trước. Sử dụng tài liệu của bài học, hãy tạo một hàm action, thêm nó vào đối tượng route gốc như một phương thức action.