การเพิ่มข้อมูลด้วยเมธอด action ใน React Router

ในบทเรียนนี้ เราจะทำความรู้จักกับเมธอด action ของออบเจ็กต์เส้นทาง (route) เมธอดนี้ จะถูกเรียกเมื่อแอปพลิเคชันส่ง คำขอ HTTP ประเภท POST, PUT, PATCH หรือ DELETE (นอกจาก GET) มายังเส้นทางของคุณ

เริ่มต้นด้วยการนำเข้าฟังก์ชันสำหรับสร้าง สินค้า ซึ่งเราเขียนไว้ในบทเรียนที่แล้ว มาไว้ในไฟล์ root.jsx ของเรา:

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

ตอนนี้เราจำเป็นต้องสร้างฟังก์ชัน action ที่ React Router จะเรียกใช้ เมื่อคลิกปุ่มเพิ่มสินค้า โดยจัดวางมันไว้หลังฟังก์ชัน loader:

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

มาเปิดไฟล์ main.jsx และนำเข้า action:

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

และตั้งค่าเป็นค่า ของเมธอด action สำหรับออบเจ็กต์เส้นทาง คอมโพเนนต์ Form จะป้องกันไม่ให้เบราว์เซอร์ ส่งคำขอไปยังเซิร์ฟเวอร์เมื่อกดปุ่ม แต่จะเรียกไปยังเมธอด action ของเส้นทางเรา นี่คือวิธีการทำงานที่น่าสนใจ ของการกำหนดเส้นทางฝั่งไคลเอ็นต์ด้วย React Router:

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

มาเปิดแอปพลิเคชันของเรากัน เปิดแท็บ 'แอปพลิเคชัน' (Application สำหรับ Chrome) บน Developer Tools ในบรรดาประเภท ที่เก็บข้อมูลต่างๆ ให้คลิกที่ indexedDB ที่นี่เรา สนใจ localforage ตอนนี้เมื่อคลิกที่ ปุ่มเพิ่มสินค้าในแอปพลิเคชันของเรา และรีเฟรชที่เก็บ localforage หลังคลิก เราจะเห็นว่าใน keyvaluepairs ภายในอาร์เรย์ products มีการเพิ่มออบเจ็กต์ที่มี id ต่างกันเข้ามา ยินดีด้วย!!! นั่นหมายความว่าในที่เก็บข้อมูลของเรา มีการสร้างเรคอร์ดขึ้น! แน่นอน ว่ารายการในแอปพลิเคชันของเราก็เพิ่มขึ้นด้วย คำแนะนำ: อย่าลืมล้างข้อมูล ที่บันทึกไว้ของหน้านี้ในแท็บ 'Storage' ใน Application ในภายหลัง

นำแอปพลิเคชันที่คุณสร้างไว้ใน แบบฝึกหัดบทเรียนก่อนหน้ามา ใช้ เนื้อหาจากบทเรียน สร้างฟังก์ชัน action เพิ่มลงในออบเจ็กต์ เส้นทางหลัก (root route) เป็นเมธอด action