Shtimi i të dhënave me metodën action në React Router

Në këtë mësim do të njihemi me metodën action të objektit të rrugës. Kjo metodë thirret kur aplikacioni dërgon HTTP kërkesë tip POST, PUT, PATCH ose DELETE (përveç GET) në rrugën tuaj.

Për të filluar, le të importojmë funksionin për krijimin e produktit, të cilin e kemi shkruar në mësimin e kaluar në root.jsx tonë:

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

Tani na duhet të krijojmë funksionin action, të cilin do ta thërrasë React Router kur klikohet butoni i shtimit të produktit, le ta vendosim pas funksionit loader:

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

Le të hapim main.jsx dhe të importojmë action:

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

Dhe ta vendosim atë si vlerë të metodës action për objektin e rrugës. Komponenti Form nuk do ta lejojë shfletuesin të dërgojë kërkesa në server kur shtypet butoni, por do të drejtohet te metoda action e rrugës sonë. Kështu funksionon në mënyrë interesante rrugëtimi në anën e klientit me React Router:

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

Le të nisim aplikacionin tonë. Le të hapim skedën 'Aplikacioni' (Application për Chrome) në panelin e zhvilluesit, midis llojeve të ndryshme të depove klikoni në indexedDB, këtu na intereson localforage. Tani duke klikuar në butonin e shtimit të produkteve në aplikacionin tonë dhe duke rifreskuar depon localforage pas klikimit shohim se si në keyvaluepairs në vargun products shtohen objekte me id të ndryshme. Fitore!!! Kjo do të thotë se në depon tonë krijohen shënime! Sigurisht lista në aplikacionin tonë gjithashtu plotësohet. Këshillë: mos harroni të pastroni më pas të dhënat e ruajtura të kësaj faqeje në skedën 'Storage' në Application.

Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të kaluara. Duke përdorur materialet e mësimit, krijoni funksionin action, shtojeni atë në objektin e rrugës rrënjësore si metodë action.