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

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

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

routes/root.jsximport { createProduct } from '../forStorage';

次に、商品追加ボタンがクリックされたときに React Routerが呼び出すaction関数を 作成する必要があります。これを loader関数の後に配置しましょう：

routes/root.jsxexport async function action() {
  const product = await createProduct();
  return { product };
}

それでは、main.jsxを開いて actionをインポートしましょう：

main.jsximport Root, {
  loader as rootLoader,
  action as rootAction
} from './routes/root';

そして、ルートオブジェクトの actionメソッドの値として設定します。 Formコンポーネントは、 ボタンが押されたときにブラウザがサーバーに リクエストを送信するのを防ぎ、代わりに ルートのactionメソッドにアクセスします。 これが、React Routerを使った クライアントサイドルーティングの興味深い 仕組みです：

main.jsxconst 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'でこのページの保存データを クリーンアップすることを忘れないでください。