React Router'da action Metodu ile Veri Ekleme

Bu derste, route nesnesinin action metodu ile tanışacağız. Bu metot, uygulamanızın route'una POST, PUT, PATCH veya DELETE (GET hariç) gibi bir HTTP isteği gönderdiğinde çağrılır.

Başlangıç olarak, bir önceki derste yazdığımız ürün oluşturma fonksiyonunu root.jsx dosyamıza içe aktaralım:

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

Şimdi, React Router'ın ürün ekleme butonuna tıklandığında çağıracağı action fonksiyonunu oluşturmamız gerekiyor, onu loader fonksiyonundan sonra yerleştirelim:

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

Hadi main.jsx dosyasını açalım ve action'ı içe aktaralım:

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

Ve onu route nesnesinin action metodu değeri olarak ayarlayalım. Form bileşeni, butona tıklandığında tarayıcının sunucuya istek göndermesine izin vermeyecek, bunun yerine route'umuzun action metoduna başvuracaktır. React Router ile istemci tarafı routing'i bu şekilde ilginç bir şekilde çalışır:

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

Uygulamamızı çalıştıralım. Geliştirici panelinde 'Uygulama' sekmesini (Chrome için Application) açalım, farklı depolama türleri arasında indexedDB'ye tıklayalım, burada bizi localforage ilgilendiriyor. Şimdi uygulamamızda ürün ekleme butonuna tıklayıp ardından localforage depolama alanını yenilediğimizde, products dizisine farklı id değerlerine sahip nesnelerin eklendiğini görüyoruz. Zafer!!! Bu, depolama alanımıza kayıtların eklendiği anlamına gelir! Tabii ki uygulamamızdaki liste de güncelleniyor. İpucu: daha sonra Application sekmesindeki 'Storage' bölümünde bu sayfanın kaydettiği verileri temizlemeyi unutmayın.

Önceki derslerin ödevlerinde oluşturduğunuz uygulamayı alın. Ders materyallerinden faydalanarak bir action fonksiyonu oluşturun, onu kök route nesnesine action metodu olarak ekleyin.