Remix Actions — Server-Side Form and Data Handling

In this tutorial, you will learn about Remix Actions. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Remix actions: handle form submissions on the server, Process POST/PUT/DELETE requests, validate input, and return responses for data mutations.

In this lesson, you'll write action functions that handle form submissions, parse request bodies, validate data, and return success or error responses.

What You'll Learn

How to define actions, parse form data and JSON, validate input with errors, return redirects, and handle different HTTP methods.

Why It Matters

Actions are the server-side counterpart to loaders. While loaders read data, actions write data. They handle everything from form submissions to API mutations.

Real-World Use

DodaZIP's user management uses actions for creating users, updating profiles, deleting accounts, and batch operations—all with server-side validation.

flowchart LR
    A[Form Submit] --> B[Action: Server]
    B --> C[Parse Data]
    C --> D[Validate]
    D -->|Valid| E[Process + Redirect]
    D -->|Invalid| F[Return Errors]
    style B fill:#121212,color:#fff

Basic Action

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

export const action = async ({ request }) => {
  const formData = await request.formData();
  const name = formData.get("name");
  
  if (!name) {
    return json({ error: "Name is required" }, { status: 400 });
  }
  
  // Save to database...
  return redirect("/success");
};

export default function NewUser() {
  const actionData = useActionData<typeof action>();
  
  return (
    <Form method="post">
      <input name="name" />
      {actionData?.error && <p>{actionData.error}</p>}
      <button type="submit">Create</button>
    </Form>
  );
}

Output: Submitting an empty name shows the error message. Submitting a valid name processes the data and redirects to /success.

Handling Different Methods

Check the HTTP method to handle different operations:

export const action = async ({ request, params }) => {
  const method = request.method;
  
  switch (method) {
    case "POST":
      return createItem(request);
    case "PUT":
      return updateItem(request, params.id);
    case "DELETE":
      return deleteItem(params.id);
    default:
      throw new Response("Method not allowed", { status: 405 });
  }
};

JSON Body Parsing

For API-like actions, parse JSON bodies:

export const action = async ({ request }) => {
  if (request.headers.get("Content-Type")?.includes("json")) {
    const data = await request.json();
    return json(await processData(data));
  }
  // Fall back to form data
  const formData = await request.formData();
  return json(await processData(Object.fromEntries(formData)));
};

Validation Pattern

Return field-level validation errors:

export const action = async ({ request }) => {
  const formData = await request.formData();
  const errors = {};
  
  const email = formData.get("email");
  if (!email || !email.includes("@")) {
    errors.email = "Valid email is required";
  }
  
  const password = formData.get("password");
  if (!password || password.length < 8) {
    errors.password = "Password must be at least 8 characters";
  }
  
  if (Object.keys(errors).length > 0) {
    return json({ errors }, { status: 422 });
  }
  
  await createUser({ email, password });
  return redirect("/login");
};

Common Mistakes

1. Not returning from actions: Actions must return a Response. Forgetting to return leads to hanging requests.
2. Using GET for mutations: Actions only handle non-GET methods (POST, PUT, PATCH, DELETE). Use loaders for GET.
3. Not validating on the server: Client-side validation is optional. Server-side validation is mandatory for security.
4. Redirecting without a reason: Always redirect after successful mutations to prevent duplicate form submissions on page refresh.

Practice Questions

1. What HTTP methods can actions handle? Answer: All non-GET methods: POST, PUT, PATCH, DELETE. Use request.method to differentiate.

2. How do you access form data in an action? Answer: Use request.formData() which returns a FormData object. Access fields with .get("fieldName").

3. How do you return validation errors from an action? Answer: Return json({ errors }, { status: 422 }) and access them in the component with useActionData().

4. Why redirect after a successful mutation? Answer: To prevent the user from resubmitting the form on page refresh (POST/redirect/GET pattern).

Challenge

Build a registration form with actions that validate email format, password length, and confirm password match. Return field-level errors and redirect on success.

Mini Project

Create a task management app with actions for creating tasks (POST), updating status (PUT), and deleting (DELETE). Each action should validate input and return appropriate responses.

FAQ

What's Next

Learn about Remix Form Handling for advanced form patterns including nested forms and file uploads.