Redux, Reducers, Middleware

Understanding Actions, Reducers, and Middleware in Redux

5 min read

  • January 22,2025
  • Yash Garg

In Redux, managing state revolves around three key components: actions, reducers, and middleware. Understanding these concepts is essential for efficiently handling state updates and side effects in a Redux-based application. In this blog, we’ll dive into each of these components and see how they work together.

1. Actions in Redux

Actions in Redux are simple JavaScript objects that represent changes to the application's state. Each action must include a type property, which specifies the nature of the change to be made.

Defining Actions:

These actions don’t perform changes themselves but describe what should happen.

Action Creators:

Instead of defining actions manually, we use functions called action creators.

2. Reducers in Redux

Reducers are pure functions that determine how state changes in response to actions. A reducer takes the current state and an action and returns a new state.

Creating a Reducer:

Reducers must be pure functions, meaning they should not modify the existing state but return a new one.

Using Redux Toolkit:

Redux Toolkit provides createSlice, which simplifies reducer creation.This approach removes the need for manual switch statements and makes reducers more readable.

3. Middleware in Redux

Middleware in Redux allows us to intercept dispatched actions and perform side effects like API calls, logging, or modifying actions before they reach the reducer.

Common Use Cases of Middleware:

  • Logging state changes
  • Handling asynchronous API requests
  • Modifying or filtering actions

Writing a Custom Middleware:

Using Redux Toolkit’s Built-in Middleware:

Conclusion

Actions, reducers, and middleware form the core building blocks of Redux. Actions describe changes, reducers update state, and middleware enhances Redux by managing side effects. In the next blog, we’ll explore Redux Thunk and Handling Asynchronous Actions, where we’ll learn how to manage API calls effectively with Redux.