React Routerにおけるactionメソッドを使ったデータの追加

このレッスンでは、ルートオブジェクトの actionメソッドについて紹介します。このメソッドは、アプリケーションが HTTPリクエストの POST、PUT、PATCH、またはDELETEタイプ（GET以外）をあなたのルートに送信したときに呼び出されます。

まず、前回のレッスンで作成した商品作成関数をroot.jsxにインポートしましょう：

import { createProduct } from '../forStorage';

次に、商品追加ボタンがクリックされたときに React Routerが呼び出すaction関数を作成する必要があります。これを 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 />,
			},
		],
	},
	
]);

アプリケーションを起動しましょう。開発者パネルの'アプリケーション'タブ（Chromeの場合はApplication）を開き、様々な種類のストレージの中からindexedDBをクリックし、ここではlocalforageに注目します。さて、アプリケーション内の商品追加ボタンをクリックし、クリック後にlocalforageストレージを更新すると、keyvaluepairs内の products配列に異なるidを持つオブジェクトが追加されているのが確認できます。成功です!!! これで、ストレージにレコードが作成されていることがわかりました！もちろん、アプリケーション内のリストも更新されます。ヒント：後で、Applicationタブの 'Storage'でこのページの保存データをクリーンアップすることを忘れないでください。

過去のレッスンの課題で作成したアプリケーションを使用してください。レッスンの資料を参考に、action関数を作成し、ルートルートオブジェクトの actionメソッドとして追加してください。