React Router-da action metodi bilan ma'lumot qo'shish

Ushbu darsda biz marshrut ob'ektining action metodi bilan tanishamiz. Ushbu metod dasturingiz marshrutingizga POST, PUT, PATCH yoki DELETE (GETdan tashqari) turidagi HTTP so'rovini yuborganida chaqiriladi.

Boshlash uchun, oldingi darsda yozgan mahsulot yaratish funksiyasini root.jsx faylimizga import qilamiz:

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

Endi biz React Router mahsulot qo'shish tugmasi bosilganda chaqiradigan action funksiyasini yaratishimiz kerak, uni loader funksiyasidan keyin joylaymiz:

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

Keling, main.jsx ni ochamiz va actionni import qilamiz:

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

Va uni marshrut ob'ekti uchun action metodining qiymati sifatida o'rnatamiz. Form komponenti brauzerga tugma bosilganda serverga so'rovlar yubormaslikka, balki bizning marshrutimizning action metodiga murojaat qilishga imkon beradi. React Router bilan mijoz tomonda marshrutlash shu qiziqarli tarzda ishlaydi:

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

Keling, dasturimizni ishga tushiramiz. Ishlab chiquvchilar panelidagi 'Ilova' (Chrome uchun Application) yorlig'ini oching, turli xil saqlash turlari orasida indexedDB ni bosing, bu erda bizi localforage qiziqtiradi. Endi dasturimizdagi mahsulot qo'shish tugmasini bosish va bosgandan so'ng localforage saqlashini yangilash orqali biz products massiviga turli id larga ega ob'ektlar qanday qo'shilayotganini ko'ramiz. G'alaba!!! Bu bizning saqlashimizda yozuvlar yaratilayotganini anglatadi! Albatta, dasturimizdagi ro'yxat ham to'ldiriladi. Maslahat: keyinroq Applicationdagi 'Saqlash' (Storage) yorlig'ida ushbu sahifaning saqlangan ma'lumotlarini tozalashni unutmang.

Oldingi darslar uchun topshiriqlarda yaratgan dasturingizni oling. Dars materiallaridan foydalanib, action funksiyasini yarating, uni action metodi sifatida ildiz marshruti ob'ektiga qo'shing.