How to Implement Redux Actions in React

This article provides a straightforward guide on how to implement Redux actions within a React application. You will learn what Redux actions are, how to define them efficiently using Redux Toolkit, and how to dispatch them from your React components to update your application’s global state.

Understanding Redux Actions

Redux actions are plain JavaScript objects that send data from your application to your Redux store. They are the only source of information for the store. An action must have a type property (usually a string) that describes the occurrence, and it can optionally have a payload property containing the data associated with the event.

Instead of writing action objects manually, developers use “action creators,” which are functions that return an action object.

Defining Actions with Redux Toolkit

The modern and standard way to implement Redux is by using Redux Toolkit (@reduxjs/toolkit). Redux Toolkit simplifies this process by automatically generating action creators and action types when you define your reducers inside a “slice.”

Here is how you define actions using createSlice:

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

// Redux Toolkit automatically generates action creators for each reducer
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

In the example above, increment, decrement, and incrementByAmount are action creators exported directly from the slice.

Dispatching Actions in React Components

To trigger these actions from your React components, you must use the useDispatch hook from the react-redux library. This hook returns a reference to the dispatch function from the Redux store, which you use to send actions.

Here is how to import and dispatch your actions inside a React component:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

export function Counter() {
  // Access the current state using useSelector
  const count = useSelector((state) => state.counter.value);
  
  // Get the dispatch function
  const dispatch = useDispatch();

  return (
    <div>
      <h2>Counter: {count}</h2>
      
      {/* Dispatching simple actions */}
      <button onClick={() => dispatch(increment())}>
        Increment
      </button>
      <button onClick={() => dispatch(decrement())}>
        Decrement
      </button>

      {/* Dispatching an action with a payload */}
      <button onClick={() => dispatch(incrementByAmount(5))}>
        Add 5
      </button>
    </div>
  );
}

Summary of the Implementation Workflow

Create a Slice: Use createSlice from Redux Toolkit to define your state and the reducer functions that modify it.
Export Actions: Extract and export the auto-generated action creators from slice.actions.
Import useDispatch: Inside your React component, import the useDispatch hook from react-redux.
Dispatch the Action: Call dispatch(actionCreator()) inside event handlers to trigger the corresponding reducer and update the state.