Menambah Data dengan Kaedah action dalam React Router

Dalam pelajaran ini, kita akan berkenalan dengan kaedah action objek laluan. Kaedah ini dipanggil apabila aplikasi menghantar Permintaan HTTP jenis POST, PUT, PATCH atau DELETE (selain GET) kepada laluan anda.

Pertama, import fungsi untuk mencipta produk yang telah kita tulis dalam pelajaran sebelumnya ke dalam root.jsx kami:

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

Sekarang kita perlu mencipta fungsi action, yang akan dipanggil oleh React Router apabila butang penambahan produk diklik, letakkannya selepas fungsi loader:

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

Mari buka main.jsx dan import action:

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

Dan tetapkan sebagai nilai kaedah action untuk objek laluan. Komponen Form akan menghalang pelayar daripada menghantar permintaan ke pelayan apabila butang ditekan, sebaliknya akan merujuk kepada kaedah action laluan kami. Beginilah cara kerja yang menarik untuk penghalaan di sebelah pelanggan dengan React Router:

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

Mari jalankan aplikasi kami. Buka tab 'Aplikasi' (Application untuk Chrome) pada panel pemaju, antara pelbagai jenis penyimpanan klik pada indexedDB, di sini kami berminat dengan localforage. Sekarang dengan mengklik pada butang tambah produk dalam aplikasi kami dan menyegarkan penyimpanan localforage selepas klik kita dapat lihat, bagaimana dalam keyvaluepairs dalam array products objek dengan berbeza id ditambahkan. Kejayaan!!! Ini bermakna dalam penyimpanan kami, rekod-rekod dicipta! Sudah tentu senarai dalam aplikasi kami juga bertambah. Petua: jangan lupa untuk membersihkan data yang disimpan halaman ini pada tab 'Storage' dalam Application kemudian.

Ambil aplikasi yang dicipta oleh anda dalam tugasan untuk pelajaran lepas. Dengan menggunakan bahan pelajaran, cipta fungsi action, tambahkannya ke dalam objek laluan akar sebagai kaedah action.