Տվյալների ավելացում action մեթոդով React Router-ում

Այս դասին մենք կծանոթանանք երթուղու օբյեկտի action մեթոդին։ Այս մեթոդը կանչվում է, երբ հավելվածը ուղարկում է HTTP հարցում POST, PUT, PATCH կամ DELETE տիպի (բացի GET-ից) ձեր երթուղուն։

Սկսելու համար ներմուծենք արտադրանք ստեղծելու ֆունկցիան, որը մենք գրել ենք նախորդ դասին, մեր root.jsx ֆայլում։

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

Այժմ մեզ անհրաժեշտ է ստեղծել action ֆունկցիան, որը կկանչի React Router-ը՝ արտադրանք ավելացնելու կոճակի վրա կտտացնելու դեպքում, տեղադրենք այն loader ֆունկցիայից հետո։

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

Եկեք բացենք main.jsx ֆայլը և ներմուծենք action-ը։

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

Եվ դնենք այն որպես արժեք action մեթոդի համար երթուղու օբյեկտում։ Form կոմպոնենտը չի թույլատրի, որ բրաուզերը ուղարկի հարցումներ սերվերին կոճակը սեղմելու դեպքում, այլ կդիմի action մեթոդին մեր երթուղու։ Ահա այսպես է հետաքրքիր աշխատում կլիենտի կողմի երթուղավորումը React Router-ի հետ։

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

Եկեք գործարկենք մեր հավելվածը։ Բացենք 'Դիմում' (Application for Chrome) ներդիրը մշակողի գործիքների վահանակում, տարբեր տեսակի պահոցների մեջ կտտացնենք indexedDB-ի վրա, այստեղ մեզ հետաքրքրում է localforage-ը։ Այժմ կտտացնելով արտադրանք ավելացնելու կոճակի վրա մեր հավելվածում և թարմացնելով localforage պահոցը կտտացնելուց հետո մենք տեսնում ենք, թե ինչպես է keyvaluepairs-ում զանգված products ավելացվում տարբեր id ունեցող օբյեկտներ։ Հաղթանակ!!! Սա նշանակում է, որ մեր պահոցում ստեղծվում են գրառումներ։ Իհարկե ցուցակը մեր հավելվածում նույնպես համալրվում է։ Հուշում․ մի մոռացեք հետո մաքրել այս էջի պահպանված տվյալները 'Storage' ներդիրում Application-ում։

Վերցրեք ձեր ստեղծած հավելվածը նախորդ դասերի առաջադրանքներում։ Օգտագործելով դասի նյութերը, ստեղծեք action ֆունկցիան, ավելացրեք այն երթուղու օբյեկտում որպես action մեթոդ։