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

Возьмите приложение, созданное вами в заданиях к прошлым урокам. Пользуясь материалами урока, создайте функцию `action`, добавьте ее в объект корневого маршрута в качестве метода `action`.

← →
↑