今回はuseActionState の使い方をまとめてみました。
useActionStateはReact Hookの一種で、フォーム送信などのActionの実行結果をstateとして扱いやすくするためのHookです。Server Actionsと組み合わせると、サーバー側で処理した結果を画面に表示しやすくなります。
簡単な使い方を見てみましょう。
実際のコードはこんな感じ。
サーバー側は以下。
まずは引数の説明から。
initialState、2回目以降は前回の Action 関数が返した値が渡されます。次に戻り値。
戻り値として、3つの要素の配列が返ってきます。
以下のような形で戻り値を受け取ります。
const [state, formAction, pending] = useActionState(createAction, initialState, permalink);
戻り値はそれぞれ以下。
今回はuseActionStateの基本的な使い方についてまとめました。
useActionStateを使うと、フォーム送信後の結果をstateとして扱えるため、成功メッセージやエラーメッセージを表示しやすくなります。
以上！
"use client";
import { useActionState } from "react";
import { createSample } from "./actions";
import styles from "./page.module.css";
const initialState = {
success: false,
message: "",
};
export default function SamplePage() {
const [state, formAction, pending] = useActionState(createSample, initialState);
return (
<div className={styles.page}>
<form action={formAction} className={styles.form}>
<input className={styles.input} name="name" placeholder="名前" />
<button className={styles.button} disabled={pending} type="submit">
送信
</button>
<p
className={`${styles.message} ${
state.success ? styles.success : styles.error
}`}
>
{state.message}
</p>
</form>
</div>
);
}
"use server";
type ActionState = {
success: boolean;
message: string;
};
export async function createSample(
_currentState: ActionState,
formData: FormData,
): Promise<ActionState> {
const name = formData.get("name")?.toString().trim();
if (!name) return { success: false, message: "名前を入力してください" };
return { success: true, message: "成功！" };
}