მონაცემების დამატება 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 Chrome-ისთვის) დეველოპერის პანელზე, სხვადასხვა ტიპის საცავებს შორის, დავაწკაპუნოთ indexedDB-ზე, აქ ჩვენ გვაინტერესებს localforage. ახლა, ჩვენს აპლიკაციაში პროდუქტების დამატების ღილაკზე დაწკაპუნებისას და localforage საცავის განახლებისას დაწკაპუნების შემდეგ ჩვენ ვხედავთ, თუ როგორ ემატება keyvaluepairs-ში products მასივში ობიექტები სხვადასხვა id-ით. გამარჯვება!!! ეს ნიშნავს, რომ ჩვენ საცავში იქმნება ჩანაწერები! რა თქმა უნდა, ჩვენი აპლიკაციის სიაც ივსება. მინიშნება: არ დაგავიწყდეთ, რომ მოგვიანებით გაასუფთაოთ ამ გვერდის შენახული მონაცემები ჩანართზე 'Storage' Application-ში.

აიღეთ აპლიკაცია, რომელიც თქვენ შექმენით წინა გაკვეთილების დავალებებში. გაკვეთილის მასალების გამოყენებით, შექმენით ფუნქცია action, დაამატეთ ის ობიექტში ძირითადი მარშრუტის, როგორც action მეთოდი.