Skip to main content

Why Redux Toolkit? Solving the "Boilerplate" Problem of Redux #113

📖 Introduction​

Following our exploration of the basics of Redux, this article introduces Redux Toolkit, the official, recommended way to write Redux logic. We will learn why Redux Toolkit was created and how it solves the common "boilerplate" problem of Redux.

📚 Prerequisites​

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

  • The core concepts of Redux (actions, reducers, store).
  • The problems of writing Redux logic by hand.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ The "Why" of Redux Toolkit: Understanding the pain points of traditional Redux that Redux Toolkit solves.
  • ✅ The Benefits of Redux Toolkit: An overview of the key features of Redux Toolkit.
  • ✅ A Glimpse of Redux Toolkit: A brief look at how Redux Toolkit simplifies Redux code.

🧠 Section 1: The Core Concepts of Redux Toolkit​

While Redux is a powerful state management library, it has been criticized for the amount of boilerplate code required to set it up. For example, in a traditional Redux application, you need to:

  • Manually create action type constants.
  • Write action creator functions.
  • Write reducers with switch statements.
  • Configure the store with middleware.

This can be a lot of code to write, especially for simple applications.

Redux Toolkit was created to solve this problem. It's a library that simplifies and standardizes the way you write Redux logic. It includes a set of tools and conventions that help you to write less code and avoid common mistakes.

Key Benefits of Redux Toolkit:

  • Simple: It has a simple API that is easy to learn and use.
  • Opinionated: It provides a set of conventions and best practices for building Redux applications.
  • Powerful: It includes powerful features like Immer for immutable updates and Redux Thunk for asynchronous logic.
  • Effective: It helps you to write better Redux code with less effort.

💻 Section 2: A Glimpse of Redux Toolkit​

Let's take a quick look at how Redux Toolkit simplifies Redux code.

In a traditional Redux application, you might have separate files for your action types, action creators, and reducers. With Redux Toolkit, you can define all of this logic in a single file using the createSlice function.

// features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

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

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

In this example, the createSlice function automatically generates action creators and action types for us. It also uses Immer under the hood to allow us to write "mutating" logic in our reducers, which is then converted to immutable updates.

💡 Conclusion & Key Takeaways​

In this article, we've learned why Redux Toolkit is the recommended way to write Redux logic. We've seen how it solves the "boilerplate" problem of Redux and how it can help you to write cleaner, more maintainable code.

Let's summarize the key takeaways:

  • Redux Toolkit is the official, recommended way to write Redux logic.
  • It simplifies Redux code by reducing boilerplate and providing a set of conventions and best practices.
  • It includes powerful features like Immer and Redux Thunk out of the box.

Challenge Yourself: To solidify your understanding, think about how you would refactor the to-do list application we've been building to use Redux Toolkit.

➡️ Next Steps​

You now have a basic understanding of why Redux Toolkit is so useful. In the next article, "configureStore and createSlice (Part 1)", we will take a deeper dive into the core functions of Redux Toolkit.

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

glossary​

  • Redux Toolkit: The official, recommended way to write Redux logic.
  • Boilerplate: Sections of code that have to be included in many places with little or no alteration.
  • Immer: A library that allows you to work with immutable state in a more convenient way.

Further Reading​