Menambahkan Data dengan Metode action di React Router

Pada pelajaran ini, kita akan berkenalan dengan metode action dari objek rute. Metode ini dipanggil ketika aplikasi mengirimkan permintaan HTTP tipe POST, PUT, PATCH, atau DELETE (selain GET) ke rute Anda.

Pertama-tama, mari impor fungsi untuk membuat produk, yang telah kita tulis pada pelajaran sebelumnya, ke dalam root.jsx kita:

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

Sekarang kita perlu membuat fungsi action, yang akan dipanggil oleh React Router ketika tombol penambahan produk diklik, letakkan setelah fungsi loader:

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

Mari buka main.jsx dan impor action-nya:

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

Dan letakkan sebagai nilai dari metode action untuk objek rute. Komponen Form akan mencegah browser untuk mengirim permintaan ke server saat tombol ditekan, melainkan akan memanggil metode action rute kita. Beginilah cara menarik kerja perutean di sisi klien dengan React Router:

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

Mari jalankan aplikasi kita. Buka tab 'Aplikasi' (Application untuk Chrome) pada panel pengembang, di antara berbagai jenis penyimpanan, klik pada indexedDB, di sini kita tertarik pada localforage. Sekarang dengan mengklik tombol penambahan produk di aplikasi kita dan menyegarkan penyimpanan localforage setelah klik kita melihat bagaimana di keyvaluepairs dalam array products ditambahkan objek-objek dengan berbagai id. Kemenangan!!! Ini berarti di penyimpanan kita, entri sedang dibuat! Tentu saja daftar di aplikasi kita juga bertambah. Petunjuk: jangan lupa untuk membersihkan nanti data yang disimpan dari halaman ini pada tab 'Storage' di Application.

Ambil aplikasi yang Anda buat dalam tugas-tugas untuk pelajaran sebelumnya. Dengan menggunakan materi pelajaran, buatlah fungsi action, tambahkan ke objek rute akar sebagai metode action.