[React Basics] Redux Toolkit: Learn to Upgrade Redux with Handy Tools

In the world of modern web development, especially with libraries like React, managing application state is one of the biggest challenges. As your app grows larger and more complex, state becomes scattered, hard to track, and even harder to debug. Redux was created as a savior, providing a centralized and predictable state management structure. However, many developers find "vanilla" Redux too verbose, requiring lots of boilerplate code and tricky configuration.

This is where Redux Toolkit (RTK) comes in and changes the game. Created by the official Redux team, Redux Toolkit isn't a new library, but an official set of tools designed to simplify and optimize working with Redux. Let's explore why Redux Toolkit is now considered the standard for state management in React apps. 🚀

What is Redux Toolkit? Why is it important?

Imagine you're building a complex LEGO model. "Vanilla" Redux is like picking up each tiny LEGO piece yourself, reading the detailed instructions, and assembling everything from scratch. This process is time-consuming and error-prone.

Redux Toolkit is like a pre-packaged LEGO set. It not only gives you all the pieces you need, but also organizes them logically, comes with super clear instructions, and provides tools to help you build faster, more efficiently, and with fewer mistakes.

Essentially, Redux Toolkit is a package (@reduxjs/toolkit) that includes all the APIs and utilities you need to write Redux code the right way. It thoroughly solves the pain points developers face with Redux:

• Too much configuration: Setting up a Redux store requires many steps and installing several libraries (like redux-thunk, reselect, immer, redux-devtools-extension).
• Too much boilerplate: To create a simple action and reducer, you have to make multiple files and write lots of repetitive code.
• Immutability is tricky: Updating state immutably (creating new copies instead of mutating directly) is error-prone, especially with deeply nested state.

Redux Toolkit simplifies all of this by bundling the best libraries and providing powerful APIs, letting you write less code while achieving more.

The "Weapons" of Redux Toolkit

Redux Toolkit equips you with a set of powerful tools. Here are the core features that make it so popular.

1. configureStore() – Setting up the Store Has Never Been Easier

Instead of manually combining reducers, adding middleware, and configuring Redux DevTools, configureStore does it all for you with a single function.

• Automatically combines reducers: Just pass an object of reducers, and configureStore calls combineReducers for you.
• Built-in default middleware: redux-thunk (for async logic) and error-checking middleware (like checking for direct state mutation) are added automatically.
• Redux DevTools enabled by default: No extra code needed to use this great debugging tool.

Example:

import { configureStore } from '@reduxjs/toolkit'
import userReducer from './features/userSlice'
import cartReducer from './features/cartSlice'

const store = configureStore({
  reducer: {
    user: userReducer,
    cart: cartReducer,
  },
})

export default store

With just a few lines, you have a complete, optimized Redux store.

2. createSlice() – Goodbye Boilerplate Code

This is probably the most loved and breakthrough feature of Redux Toolkit. createSlice lets you define a slice of state, including reducers and related actions, all in a single file.

• Automatically creates Action Creators: Just write your reducer functions, and createSlice generates the corresponding action creators for you.
• Uses Immer under the hood: createSlice integrates the Immer library, letting you "mutate" state directly in reducers. Immer handles the complexity to ensure state is still updated immutably behind the scenes. This makes your code much shorter and easier to read.

Example of a slice:

import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      // You can "mutate" state directly here!
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

// Action creators are generated automatically
export const { increment, decrement, incrementByAmount } = counterSlice.actions

// Export the reducer
export default counterSlice.reducer

With createSlice, you no longer have to write action type constants, action creators, and long switch statements in reducers. Everything is neatly packaged.

3. createAsyncThunk() – Elegant Async Handling

Calling APIs and handling async tasks is a must in web apps. createAsyncThunk is an API designed specifically for handling async flows (like fetching data) in a standardized way.

It automatically generates action types for the promise states (pending, fulfilled, rejected), and you can listen for these actions in your reducer to update state accordingly (e.g., show a loading spinner, display data on success, or show an error on failure).

Example:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { fetchUserById } from './userAPI'

// Create an async thunk
export const getUserById = createAsyncThunk(
  'users/fetchById',
  async (userId, thunkAPI) => {
    const response = await fetchUserById(userId)
    return response.data
  },
)

const userSlice = createSlice({
  name: 'users',
  initialState: { entities: [], loading: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getUserById.pending, (state) => {
        state.loading = 'loading'
      })
      .addCase(getUserById.fulfilled, (state, action) => {
        state.loading = 'idle'
        state.entities.push(action.payload)
      })
      .addCase(getUserById.rejected, (state) => {
        state.loading = 'failed'
      })
  },
})

export default userSlice.reducer

4. RTK Query – Awesome Data Fetching and Caching

If createAsyncThunk is great for async tasks, RTK Query takes it to the next level. It's a powerful data fetching and caching solution built right into Redux Toolkit, inspired by modern libraries like React Query and SWR.

With RTK Query, you just define your API "endpoints". It automatically handles:

• Fetching, re-fetching, and caching data.
• Automatically generating React hooks (useQuery, useMutation) for easy use in components.
• Managing loading and error states without extra code.
• Performance optimization by avoiding unnecessary API calls.

RTK Query is extremely powerful, simplifying most logic related to server interaction.

How to Get Started with Redux Toolkit?

The best way is to use the official Create React App template:

npx create-react-app my-app --template redux

Or, if you want to add it to an existing project:

npm install @reduxjs/toolkit react-redux

Then, start by creating your store with configureStore and defining state slices with createSlice. The recommended folder structure is to put all logic for a "feature" (e.g., user, product) in the same folder (features/user/userSlice.js).

Conclusion: The Future of Redux is Redux Toolkit

Redux Toolkit isn't just an "easier version" of Redux. It's the result of years of community experience, distilled into a powerful, efficient, and accessible toolset. It helps you write Redux code faster, cleaner, and with fewer bugs.

If you're starting a new project with Redux, use Redux Toolkit. If you're working on an old Redux project, consider migrating to Redux Toolkit. The productivity and maintainability benefits are undeniable. Redux Toolkit is truly how Redux was meant to be used. ✨

Happy coding with React Redux and Toolkit!