Action functions for mutations in Remix - Mini Project: Build & Apply

Action functions for mutations

📖 Scenario: You are building a simple Remix app to manage a list of tasks. Users can add new tasks through a form. The app needs to handle the form submission and update the task list on the server.

🎯 Goal: Create an action function in Remix to handle adding a new task to the task list when the form is submitted.

📋 What You'll Learn

Create an initial task list array called tasks with two tasks: { id: 1, title: 'Buy groceries' } and { id: 2, title: 'Walk the dog' }.

Add a variable called nextId set to 3 to track the next task ID.

Write an action function that reads the title from the form data and adds a new task object to tasks with the next ID.

Export the action function as the default export.

💡 Why This Matters

🌍 Real World

Managing user input and updating server-side data is common in web apps. Remix action functions handle these mutations cleanly.

💼 Career

Understanding Remix action functions is essential for building full-stack React apps with server-side logic.

1

Create the initial task list

Create an array called tasks with two objects: { id: 1, title: 'Buy groceries' } and { id: 2, title: 'Walk the dog' }.

Remix

# Your code here

Hint

Use export let tasks = [...] to create the array.

2

Add a nextId variable

Add a variable called nextId and set it to 3 to track the next task ID.

Remix

export let tasks = [
  { id: 1, title: 'Buy groceries' },
  { id: 2, title: 'Walk the dog' }
];

# Your code here

Hint

Use export let nextId = 3; to create the variable.

3

Write the action function to add a task

Write an async function called action that takes { request } as a parameter. Inside, get the form data from request.formData(), read the title field, then push a new task object with id: nextId and the title into tasks. Increment nextId by 1. Return null at the end.

Remix

export let tasks = [
  { id: 1, title: 'Buy groceries' },
  { id: 2, title: 'Walk the dog' }
];

export let nextId = 3;

# Your code here

Hint

Remember to use await request.formData() and formData.get('title').

4

Export the action function as default

Add a line to export the action function as the default export using export default action;.

Remix

export let tasks = [
  { id: 1, title: 'Buy groceries' },
  { id: 2, title: 'Walk the dog' }
];

export let nextId = 3;

export async function action({ request }) {
  let formData = await request.formData();
  let title = formData.get('title');
  tasks.push({ id: nextId, title });
  nextId++;
  return null;
}

# Your code here

Hint

Use export default action; to export the function.