Actions

React JS: Redux Fundamentals - Actions

Actions are plain JavaScript objects that describe what happened. They are the only way to trigger a state change in a Redux application. Think of them as events that tell the reducer how to update the state.

What are Actions?

• Plain JavaScript Objects: Actions must be simple JavaScript objects. They cannot be functions, promises, or anything else.
• type Property (Required): Every action must have a type property. This is a string constant that identifies the action being performed. It's best practice to define these as constants to avoid typos.
• payload Property (Optional): Actions can optionally include a payload property. This property carries any data needed by the reducer to update the state. It's the "what" of the action.

Example:

// Action creator
const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    payload: text
  };
};

// Dispatching the action
dispatch(addTodo('Buy groceries'));

In this example:

• ADD_TODO is the action type.
• 'Buy groceries' is the payload, representing the text of the new todo item.

Action Creators

While you can create actions directly, it's common to use action creators.

• Functions that return actions: Action creators are functions that return action objects.
• Encapsulation & Reusability: They encapsulate the action creation logic, making your code more organized and reusable.
• Easier Testing: Action creators are easier to test than directly constructing action objects.

Example (continued):

// Action creator
const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    payload: text
  };
};

const toggleTodo = (id) => {
  return {
    type: 'TOGGLE_TODO',
    payload: id
  };
};

Dispatching Actions

Actions are dispatched using the dispatch() function provided by the Redux store.

• store.dispatch(action): This sends the action to the reducer.
• Middleware (Optional): Before reaching the reducer, the action can be intercepted by middleware (e.g., for logging, asynchronous operations).

Example:

import store from './store'; // Assuming you have a Redux store

store.dispatch(addTodo('Walk the dog'));
store.dispatch(toggleTodo(1));

Best Practices

• Use Constants for Action Types: Define action types as string constants to prevent typos and improve maintainability.

  // constants.js
  export const ADD_TODO = 'ADD_TODO';
  export const TOGGLE_TODO = 'TOGGLE_TODO';
  

  Then, in your action creator:

  import { ADD_TODO } from './constants';
  
  const addTodo = (text) => {
    return {
      type: ADD_TODO,
      payload: text
    };
  };
  

• Keep Action Creators Pure: Action creators should be pure functions – they should always return the same output for the same input and have no side effects.

• Payload Structure: Consider the structure of your payload. It should contain all the data the reducer needs to perform the state update. Using a single payload object is common, but you can also use multiple properties if it makes sense for your application.

Summary

Actions are the fundamental mechanism for triggering state changes in Redux. By using action creators and dispatching actions through the store, you maintain a predictable and manageable state flow in your application. Remember the key principles: plain JavaScript objects, a required type property, and optional payload data.