Дадаванне дадзеных з метадам 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.