React Actions และ useActionState

ยินดีต้อนรับ

React Actions คืออะไร

แอ็กชันฝั่งเซิร์ฟเวอร์ใน Next.js

'use server';

export async function createPost(formData) {
  const title = formData.get('title');
  await db.insert(posts).values({ title });
  revalidatePath('/posts');
}

การใช้แอ็กชันกับแบบฟอร์ม

import { createPost } from './actions';

export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button type="submit">Create</button>
    </form>
  );
}

useActionState

'use client';
import { useActionState } from 'react';
import { createPost } from './actions';

function NewPostForm() {
  const [state, action, isPending] = useActionState(createPost, null);
  return (
    <form action={action}>
      {state?.error && <p>{state.error}</p>}
      <input name="title" />
      <button disabled={isPending}>Create</button>
    </form>
  );
}

แอ็กชันที่ส่งคืนสถานะ

'use server';

export async function createPost(prevState, formData) {
  const title = formData.get('title')?.toString();
  if (!title) return { error: 'Title is required' };
  await db.insert(posts).values({ title });
  return { success: true };
}

isPending สำหรับปิดใช้งานปุ่มส่ง

<button type="submit" disabled={isPending}>
  {isPending ? 'Saving...' : 'Save'}
</button>

แอ็กชันฝั่งไคลเอนต์

async function clientAction(prevState, formData) {
  const res = await fetch('/api/post', {
    method: 'POST', body: formData,
  });
  if (!res.ok) return { error: 'Failed' };
  return { success: true };
}

useFormStatus สำหรับคอมโพเนนต์ลูก

'use client';
import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>Submit</button>;
}

การปรับปรุงการทำงานแบบค่อยเป็นค่อยไป

ตรวจสอบความเข้าใจอย่างรวดเร็ว

สรุปทบทวน

ถัดไป