React Router-da action metodu ile melumat elavesi

Bu dersde biz marşrut obyektinin action metodu ile tanis olacagıq. Bu metod çağırılır ki, zaman aplikasiya POST, PUT, PATCH ve ya DELETE tipinde (GET istisna olmaqla) HTTP sorğusu gönderir sizin marşrutunuza.

Başlamaq üçün, biz keçen dersde yazdığımız məhsul yaratma funksiyasını import edek bizim root.jsx faylına:

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

İndi bizə lazımdır funksiya yaratmaq action, hansını ki, çağıracaq React Router məhsul əlavə etmə düyməsinə klik edende, onu yerləşdirek loader funksiyasından sonra:

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

Gəlin açaq main.jsx və import edek action-u:

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

Və onu qoyaq action metodunun qiyməti kimi marşrut obyekti üçün. Form komponenti imkan vermeyecek brauzera serverə sorğu göndermeye düymə basıldıqda, əksinə müraciət edecek action metoduna bizim marşrutumuzun. Belə maraqlı işleyir müştəri tərəfində marşrutlaşdırma React Router ilə:

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

Gəlin işə salaq bizim aplikasiyanı. Açaq vərəqni 'Aplikasiya' (Chrome üçün Application) developer panelinde, müxtəlif tipli depolardan klik edek indexedDB üzerine, burada bizi maraqlandırır localforage. İndi klik ederek aplikasiyamızda məhsul əlavə etmə düyməsinə və yeniləyerek localforage depolamasını klikdən sonra biz görürük ki, keyvaluepairs içinde massivə products əlavə olunur obyektlər müxtəlif id ilə. Zəfər!!! Bu o deməkdir ki, bizdə depoda yaradılır yazılar! Əlbəttə siyahı bizim aplikasiyamızda da doldurulur. İpucu: sonra təmizleməyi unutmayın saxlanılmış məlumatları bu səhifənin 'Storage' vərəqinde Application hissəsində.

Əvvəlki dərslərin tapşırıqlarında yaratdığınız aplikasiyanı götürün. Dərs materiallarından istifadə edərək, yaradın funksiya action, əlavə edin onu kök marşrutun obyektinə action metodu kimi.