Skip to main content

`configureStore` and `createSlice` (Part 1): The Core of Redux Toolkit #114

📖 Introduction​

Following our introduction to Redux Toolkit, this article dives into the two core functions that you will use to build your Redux store: configureStore and createSlice. We will learn what these functions do and how they work together to simplify Redux development.

📚 Prerequisites​

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

  • The core concepts of Redux (actions, reducers, store).
  • The benefits of Redux Toolkit.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ configureStore: How it simplifies the creation of the Redux store.
  • ✅ createSlice: How it simplifies the creation of reducers and actions.
  • ✅ Core Implementation: How to use configureStore and createSlice to create a simple counter application.

🧠 Section 1: The Core Concepts of configureStore and createSlice​

1.1 - configureStore​

The configureStore function is a wrapper around the original Redux createStore function that simplifies the setup process. It automatically:

  • Combines your slice reducers into a single root reducer.
  • Adds the Redux Thunk middleware by default.
  • Sets up the Redux DevTools Extension.

1.2 - createSlice​

The createSlice function is a powerful utility that allows you to define a "slice" of your Redux state. A slice is a collection of Redux reducer logic and actions for a single feature in your app.

createSlice automatically:

  • Generates action creators and action types based on the reducers you define.
  • Uses the Immer library internally, which allows you to write "mutating" code that is safely turned into immutable updates.

💻 Section 2: Deep Dive - Implementation and Walkthrough​

Let's see how to use configureStore and createSlice to build a simple counter application.

2.1 - Creating a Slice​

First, let's create a counterSlice.js file.

// 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;

Step-by-Step Code Breakdown:

  1. createSlice: We call createSlice with a name, an initialState, and a reducers object.
  2. reducers: The reducers object contains the reducer functions for this slice.
  3. counterSlice.actions: createSlice automatically generates action creators for each of our reducer functions.
  4. counterSlice.reducer: createSlice also generates the reducer function for this slice.

2.2 - Configuring the Store​

Now, let's create our store in app/store.js.

// app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Step-by-Step Code Breakdown:

  1. configureStore: We call configureStore with a reducer object.
  2. reducer: The reducer object contains all of our slice reducers. configureStore will automatically combine them into a single root reducer.

💡 Conclusion & Key Takeaways​

In this article, we've learned about the two core functions of Redux Toolkit: configureStore and createSlice. We've seen how they work together to simplify the process of creating a Redux store and defining your state logic.

Let's summarize the key takeaways:

  • configureStore simplifies the creation of the Redux store.
  • createSlice simplifies the creation of reducers and actions.
  • Together, they significantly reduce the amount of boilerplate code you need to write.

Challenge Yourself: To solidify your understanding, try to add a new action to the counterSlice that increments the counter by a specific amount.

➡️ Next Steps​

You now have a basic understanding of configureStore and createSlice. In the next article, "configureStore and createSlice (Part 2)", we will build a more practical example of how to use these functions in a React application.

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

glossary​

  • Slice: A collection of Redux reducer logic and actions for a single feature in your app.
  • Immer: A library that allows you to work with immutable state in a more convenient way.

Further Reading​