【Remix】actionとは | エンジニアの参考書

actionとはフォームから単にPOSTリクエストを送る POSTしたレスポンスデータを使って画面に表示する番外編：ボタンを押して任意のPOSTリクエストを送る関連記事

actionとは

loaderと同様にサーバーサイドで処理される関数で、
GET以外のメソッド（POST、PUT、PATCH、DELETE）で呼び出しが行われたときに実行される関数。

フォームを送信したいときや、バックエンドにデータ送信を行いたい場合に利用する。

フォームから単にPOSTリクエストを送る

JSONPlaceholder - Free Fake REST API にPOSTリクエストを送信する処理を実装する。

jsonplaceholderは以下のようにダミーのPOSTメソッドが用意されていて、
叩くとリクエストボディと同じ結果が返ってくるので、POSTの確認はこれを用いて行う。

$ curl -XPOST "https://jsonplaceholder.typicode.com/posts" -H 'Content-Type: application/json' -d '{"title":"hoge"}'
{
  "title": "hoge",
  "id": 101
}

■ app/routes/posts.tsx

フォームに文字を入力し、jsonplaceholderにPOSTする処理を実装する。

Remixの Formは少し特別で、input要素で入力された要素がaction関数の引数に渡り、action関数が実行される流れとなる。

参考：Form | Remix

import { ActionFunctionArgs } from "@remix-run/node";
import { Form, redirect } from "@remix-run/react";

export async function action({ request }: ActionFunctionArgs) {
  // フォームに入力されたデータを取得
  const body = await request.formData();
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      title: body.get("title"),
    }),
  });
  const data = await response.json();
  console.log({ data }); // ログ出力で実行を確認
  return redirect("/");  // 任意のページにリダイレクト（今回はTOPページ）
}

export default function Posts() {
  return (
    <>
      <h1>フォームサンプル</h1>
      <Form method="post">
        <input type="text" name="title" />
        <button type="submit">Create post</button>
      </Form>
    </>
  );
}

■結果

16:56:05 [vite] hmr update /app/routes/posts.tsx (x16)
{ data: { title: 'ほげほげ', id: 101 } }

フォームに入力された内容がjsonplaceholderにPOSTされ、レスポンスがログ出力されていることが確認できる。

POSTしたレスポンスデータを使って画面に表示する

POSTした結果のレスポンスボディを、画面に表示したいときもある。

その場合は useActionDataを使うと良い。

■ app/routes/posts.tsx

import { ActionFunctionArgs } from "@remix-run/node";
import { Form, useActionData } from "@remix-run/react";

export async function action({ request }: ActionFunctionArgs) {
  const body = await request.formData();
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      title: body.get("title"),
    }),
  });
  const data = await response.json();
  // レスポンスボディを返却する
  return {
    id: data.id,
    title: data.title,
  };
}

export default function Posts() {
  // これでactionの返り値を取得できる
  // `typeof action`でレスポンスの型を推論してくれる
  const data = useActionData<typeof action>();
  return (
    <>
      <h1>フォームサンプル</h1>
      <Form method="post">
        <input type="text" name="title" />
        <button type="submit">Create post</button>
      </Form>
      <div>
        <ul>
          <li>{data?.id}</li>
          <li>{data?.title}</li>
        </ul>
      </div>
    </>
  );
}

■送信前

■送信後

番外編：ボタンを押して任意のPOSTリクエストを送る

これはクライアントサイドで実行することを想定する。

これはRemix関係なく、普通にReactのコードを書くだけで良い。

もし認証情報が必要な場合は、
📄【Remix】ブラウザから呼ぶプロキシAPIを作るを参考にプロキシAPIを作成し、そこを経由することで認証させるのが望ましい。

■ app/routes/posts.tsx

import { useState } from "react";

interface Post {
  id: number;
  title: string;
  body: string;
}

export default function Posts() {
  // ReactのuseStateにより状態管理
  const [post, setPost] = useState<Post | undefined>(undefined);

  // jsonplaceholderにPOSTリクエストを行い、レスポンスデータを`post`に設定する
  const fetchPost = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        title: "title",
        body: "body",
      }),
    });
    const data = (await response.json()) as Post;
    setPost(data);
  };

  return (
    <>
      <h1>フォームサンプル</h1>
      <button type="submit" onClick={fetchPost}>
        POSTデータを送信してレスポンスを取得するボタン
      </button>
      <p>id: {post?.id}</p>
      <p>title: {post?.title}</p>
      <p>body: {post?.body}</p>
    </>
  );
}

■ボタン押下前

■ボタン押下後