Skip to main content

Redux Actions and Action Creators (Part 1): Defining What Can Happen in Your App #107

📖 Introduction​

Following our exploration of the core principles of Redux, this article dives into the first building block of a Redux application: actions. We will learn what actions are, how to create them, and how they are used to describe what happened in your application.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • The three core principles of Redux.
  • Basic JavaScript objects.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ What Actions Are: Understanding the role of actions in a Redux application.
  • ✅ Action Creators: How to use action creators to create actions.
  • ✅ Core Implementation: How to write actions and action creators for a to-do list application.

🧠 Section 1: The Core Concepts of Actions and Action Creators​

In Redux, an action is a plain JavaScript object that represents an intention to change the state. Actions are the only way to get data into the Redux store.

An action must have a type property that indicates the type of action being performed. The type is typically a string constant.

For example, here's an action that represents adding a to-do item:

{
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Learn Redux'
  }
}

An action creator is a function that creates and returns an action object. Using action creators makes your code more reusable and easier to test.

Here's an action creator for our ADD_TODO action:

function addTodo(text) {
  return {
    type: 'ADD_TODO',
    payload: {
      id: nextTodoId++,
      text
    }
  };
}

💻 Section 2: Deep Dive - Implementation and Walkthrough​

Let's write some actions and action creators for our to-do list application.

2.1 - Action Types​

It's a good practice to define your action types as constants. This helps to avoid typos and makes your code more maintainable.

// actionTypes.js
export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';

2.2 - Action Creators​

Now, let's create our action creators.

// actions.js
import { ADD_TODO, TOGGLE_TODO, SET_VISIBILITY_FILTER } from './actionTypes';

let nextTodoId = 0;

export function addTodo(text) {
  return {
    type: ADD_TODO,
    payload: {
      id: nextTodoId++,
      text
    }
  };
}

export function toggleTodo(id) {
  return {
    type: TOGGLE_TODO,
    payload: { id }
  };
}

export function setVisibilityFilter(filter) {
  return {
    type: SET_VISIBILITY_FILTER,
    payload: { filter }
  };
}

Step-by-Step Code Breakdown:

  1. import ...: We import our action type constants.
  2. let nextTodoId = 0;: We use a simple variable to keep track of the next to-do ID.
  3. addTodo(text): This action creator takes the text of the to-do item as an argument and returns an ADD_TODO action.
  4. toggleTodo(id): This action creator takes the ID of the to-do item as an argument and returns a TOGGLE_TODO action.
  5. setVisibilityFilter(filter): This action creator takes a filter string as an argument and returns a SET_VISIBILITY_FILTER action.

💡 Conclusion & Key Takeaways​

In this article, we've learned about Redux actions and action creators. We've seen how to define action types as constants and how to create action creators to make our code more maintainable.

Let's summarize the key takeaways:

  • Actions are plain JavaScript objects that describe what happened in your application.
  • They must have a type property.
  • Action creators are functions that create and return actions.
  • Defining action types as constants is a good practice.

Challenge Yourself: To solidify your understanding, try to create an action and action creator for removing a to-do item.

➡️ Next Steps​

You now have a solid understanding of Redux actions and action creators. In the next article, "Redux Actions and Action Creators (Part 2)", we will build a more practical example of how to use actions and action creators in a React application.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • Action: A plain JavaScript object that represents an intention to change the state.
  • Action Creator: A function that creates and returns an action.
  • Payload: The data that is sent with an action.

Further Reading​