Actions та form actions · fullstack.org.ua

Середній18 хв· Fullstack Team

Actions та form actions

Створите форми із Server Actions, обробкою відправлення та керуванням станами через Actions і form actions.

Що таке Actions у React

Action — це функція, яку React може викликати під час зміни даних: надсилання форми, виконання мутації або іншої асинхронної операції.

У контексті форм action-функція:

отримує FormData;
виконує синхронну або асинхронну операцію;
може повертати результат;
може використовуватися разом зі станами pending, success та error;
може бути серверною функцією, якщо це підтримує фреймворк.

У React 19 функцію можна передати безпосередньо у властивість action елемента <form>:

jsx

<form action={submitForm}>
  {/* поля форми */}
</form>

jsx

import { useState } from 'react';

function ContactForm() {
  const [message, setMessage] = useState('');

  async function sendMessage(formData) {
    const name = formData.get('name');
    const email = formData.get('email');

    if (!name || !email) {
      setMessage('Заповніть усі поля');
      return;
    }

    // Імітація запиту до сервера
    await new Promise((resolve) => setTimeout(resolve, 1000));

    setMessage(`Повідомлення від ${name} надіслано`);
  }

  return (
    <form action={sendMessage}>
      <label>
        Ім'я
        <input name="name" type="text" />
      </label>

      <label>
        Email
        <input name="email" type="email" />
      </label>

      <button type="submit">Надіслати</button>

      {message && <p>{message}</p>}
    </form>
  );
}

export default ContactForm;

jsx

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Надсилання...' : 'Надіслати'}
    </button>
  );
}

jsx

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Збереження...' : 'Зберегти'}
    </button>
  );
}

async function saveProfile(formData) {
  const username = String(formData.get('username') || '').trim();

  await new Promise((resolve) => setTimeout(resolve, 1000));

  console.log('Збережено:', username);
}

export default function ProfileForm() {
  return (
    <form action={saveProfile}>
      <label>
        Ім'я користувача
        <input name="username" required />
      </label>

      <SubmitButton />
    </form>
  );
}

jsx

import { useActionState } from 'react';

const initialState = {
  message: '',
};

async function subscribe(previousState, formData) {
  const email = String(formData.get('email') || '').trim();

  if (!email.includes('@')) {
    return {
      message: 'Введіть коректну email-адресу',
    };
  }

  await new Promise((resolve) => setTimeout(resolve, 1000));

  return {
    message: 'Підписку оформлено',
  };
}

export default function SubscribeForm() {
  const [state, formAction, isPending] = useActionState(
    subscribe,
    initialState
  );

  return (
    <form action={formAction}>
      <label>
        Email
        <input name="email" type="email" />
      </label>

      <button type="submit" disabled={isPending}>
        {isPending ? 'Обробка...' : 'Підписатися'}
      </button>

      {state.message && <p>{state.message}</p>}
    </form>
  );
}

jsx

import { useActionState } from 'react';

const initialState = {
  ok: false,
  message: '',
  errors: {},
};

async function createAccount(previousState, formData) {
  const email = String(formData.get('email') || '').trim();
  const password = String(formData.get('password') || '');

  const errors = {};

  if (!email.includes('@')) {
    errors.email = 'Введіть коректний email';
  }

  if (password.length < 8) {
    errors.password = 'Пароль має містити щонайменше 8 символів';
  }

  if (Object.keys(errors).length > 0) {
    return {
      ok: false,
      message: 'Форма містить помилки',
      errors,
    };
  }

  return {
    ok: true,
    message: 'Обліковий запис створено',
    errors: {},
  };
}

export default function AccountForm() {
  const [state, formAction, isPending] = useActionState(
    createAccount,
    initialState
  );

  return (
    <form action={formAction}>
      <label>
        Email
        <input name="email" type="email" aria-invalid={Boolean(state.errors.email)} />
      </label>

      {state.errors.email && <p>{state.errors.email}</p>}

      <label>
        Пароль
        <input
          name="password"
          type="password"
          aria-invalid={Boolean(state.errors.password)}
        />
      </label>

      {state.errors.password && <p>{state.errors.password}</p>}

      <button type="submit" disabled={isPending}>
        {isPending ? 'Створення...' : 'Створити акаунт'}
      </button>

      {state.message && <p>{state.message}</p>}
    </form>
  );
}

javascript

'use server';

export async function createTask(previousState, formData) {
  const title = String(formData.get('title') || '').trim();

  if (title.length < 3) {
    return {
      ok: false,
      message: 'Назва завдання має містити щонайменше 3 символи',
    };
  }

  // Тут може бути запис до бази даних.
  console.log('Нове завдання:', title);

  return {
    ok: true,
    message: 'Завдання створено',
  };
}

jsx

'use client';

import { useActionState } from 'react';
import { createTask } from '../actions';

const initialState = {
  ok: false,
  message: '',
};

function SubmitButton() {
  return (
    <button type="submit">
      Створити завдання
    </button>
  );
}

export default function TaskForm() {
  const [state, formAction, isPending] = useActionState(
    createTask,
    initialState
  );

  return (
    <form action={formAction}>
      <label>
        Назва завдання
        <input name="title" required minLength={3} />
      </label>

      <SubmitButton />

      {isPending && <p>Збереження...</p>}

      {state.message && (
        <p role={state.ok ? 'status' : 'alert'}>
          {state.message}
        </p>
      )}
    </form>
  );
}

jsx

'use client';

import { useActionState } from 'react';
import { useFormStatus } from 'react-dom';
import { createTask } from '../actions';

const initialState = {
  ok: false,
  message: '',
};

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Створення...' : 'Створити завдання'}
    </button>
  );
}

export default function TaskForm() {
  const [state, formAction] = useActionState(
    createTask,
    initialState
  );

  return (
    <form action={formAction}>
      <label>
        Назва
        <input name="title" required />
      </label>

      <SubmitButton />

      {state.message && <p>{state.message}</p>}
    </form>
  );
}

jsx

function Form() {
  function handleSubmit(event) {
    event.preventDefault();

    const formData = new FormData(event.currentTarget);
    // Обробка даних вручну
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="title" />
      <button type="submit">Зберегти</button>
    </form>
  );
}

jsx

async function save(formData) {
  // React передає FormData автоматично
}

function Form() {
  return (
    <form action={save}>
      <input name="title" />
      <button type="submit">Зберегти</button>
    </form>
  );
}

javascript

export async function updateTask(previousState, formData) {
  const taskId = String(formData.get('taskId') || '');
  const title = String(formData.get('title') || '').trim();

  // Перевірка taskId і title перед оновленням
  return {
    ok: true,
    message: `Завдання ${taskId} оновлено`,
  };
}

Actions та form actions

Що таке Actions у React

Form actions

Нормалізація значень

Стан виконання action

Керування результатом через `useActionState`

Обробка помилок форми

Server Actions

Серверна action

Компонент форми

`useFormStatus` разом із Server Actions

`action` форми та `onSubmit`

Обробник через `onSubmit`

Обробник через `action`

Передавання додаткових значень

Типовий потік форми з Action

Типові помилки

Використання `useFormStatus` у компоненті форми

Відсутність атрибута `name`

Неправильний порядок аргументів у `useActionState`

Валідація лише в браузері

Блокування всієї форми замість кнопки

Використання server action у звичайному клієнтському React без підтримки фреймворку

Підсумок

Actions та form actions

Що таке Actions у React

Form actions

Нормалізація значень

Стан виконання action

Керування результатом через useActionState

Обробка помилок форми

Server Actions

Серверна action

Компонент форми

useFormStatus разом із Server Actions

action форми та onSubmit

Обробник через onSubmit

Обробник через action

Передавання додаткових значень

Типовий потік форми з Action

Типові помилки

Використання useFormStatus у компоненті форми

Відсутність атрибута name

Неправильний порядок аргументів у useActionState

Валідація лише в браузері

Блокування всієї форми замість кнопки

Використання server action у звичайному клієнтському React без підтримки фреймворку

Підсумок

Керування результатом через `useActionState`

`useFormStatus` разом із Server Actions

`action` форми та `onSubmit`

Обробник через `onSubmit`

Обробник через `action`

Використання `useFormStatus` у компоненті форми

Відсутність атрибута `name`

Неправильний порядок аргументів у `useActionState`