Добавяне на данни с метода 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.