Добавление данных с методом action в React Router

На этом уроке мы познакомимся с методом action объекта маршрута. Этот метод вызывается тогда, когда приложение посылает HTTPS запрос типа 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.