Stop Struggling with Redux: Learn Redux Toolkit the Easy Way

What is Redux?

Imagine your app is a kitchen, and you’re cooking. You have a lot of ingredients (data) scattered everywhere—on the counter, in the fridge, in drawers. Without organization, it’s hard to find what you need.

Redux is like a kitchen organizer. It puts all your ingredients in labeled containers and stores them neatly, so whenever you need something, you know exactly where to look. This helps keep your kitchen (app) neat and running smoothly, even when you’re preparing a big meal.

What is the

Redux Toolkit?

Redux Toolkit is like an all-in-one toolbox that makes working with Redux much easier and faster. It gives you ready-made tools to handle everything, so you don’t have to build everything from scratch.

So, Redux Makes State Management Easy, and the Redux toolkit makes the Redux easy to work with.

In this guide, we’ll walk through how to use the Redux Toolkit step by step. You’ll learn how to set up Redux Toolkit, create a simple counter app, and understand its core features like slices, actions, and reducers—all with easy examples and screenshots. By the end, you’ll have a solid foundation for managing state with Redux Toolkit in any project!

First, install Redux and Redux Toolkit in your app:

Run this command in your terminal:

npm install @reduxjs/toolkit react-redux

Step 1: Set up the Redux Store

What is a Store
Think of the store as a big box where all the important information (state) of your app is kept. This box holds everything your app needs to know, like how many items are in a shopping cart or what the current user’s name is.

To create this box (store), we use a special function called configureStore. This box will keep everything organized so your app can find and update its information easily.

1. In your src folder, create a new folder called app.

2. Inside the app folder, create a file called store.js.

Now, inside store.js, add the following code to create the store:

import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({
  reducer: {},
});

Step 2: Set Up the Store in main.tsx

Now, you need to tell your app to use the store. Open your main.tsx file and update it like this:

1. Import the store you just created and the Provider from react-redux.

2. Wrap your app with the <Provider> and pass the store to it.

import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";
import { store } from "./app/store.js";
import { Provider } from "react-redux";


createRoot(document.getElementById("root")).render(
  <Provider store={store}>
    <App />
  </Provider>
);

Explanation:

• You just created a store.js file inside a new app folder.

• The Provider component makes the Redux store available to all parts of your app.

What is a Slice?

A slice is like a section or part of your app’s state. It’s a way to break down your store into smaller, easier-to-manage pieces.

Each slice has:

• A state (the data for that part of your app).

• A reducer (the logic to change that data).

For example, you might have a slice for handling user information, another one for the cart in an e-commerce app, and so on. It helps keep things organized and easy to update.

Step 1: Create a Folder for Slices

1. Inside the src/app folder, create a new folder called features. This is where we’ll store all the slices for our app.

2. Inside the features folder, create a file called counterSlice.js. This will be the slice we use to manage the counter state.

Code for counterSlice.js

In the counterSlice.js file, you’ll define the state and the actions (logic to update the state) for the counter.

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 Explanation of the Counter Slice

1. Import createSlice:

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

To create a slice, we need to import createSlice from Redux Toolkit.

2. Create the Slice:

export const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
});

We create the slice using createSlice({}). Inside this, we define the following:

• name: A name for this slice of the state. In our case, it’s "counter".

• initialState: The initial value for the state. We’re starting with value: 0 since we’re creating a counter.

• reducers: These are the actions (functions) that can change the state. We define two actions:

• increment*(think of this as function)*: Increases the counter by 1.

• decrement*(think of this as function)*: Decreases the counter by 1.

3. Export Actions and Reducer:

After defining the actions inside the slice, we need to export them so we can use them in our components:

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

• increment and decrement actions are exported from counterSlice.actions.

• The reducer (which controls the state) is exported to be used in the store.

Step 4: Set Up the Store with the Counter Reducer

To use the functions we stored using Redux Toolkit, we first need to configure the store to include the counterSlice.

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./features/counter/counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,  // Add the counterReducer to the store
  },
});

In store.js, import configureStore from @reduxjs/toolkit and the counterReducer from the counterSlice file. Then, use configureStore to set up the store like this:

Now, To use the store and slices we created

Step 1: Create a components Folder

Inside your src folder, create a new folder called components.

Step 2: Create the Counter.jsx Component

Inside the components folder, create a file named Counter.jsx.

Step 3: Add the Counter.jsx Component to App.jsx

import Counter from "./components/Counter";

const App = () => {
  return (
    <div>
      <Counter />
    </div>
  );
};
export default App;

In Counter.jsx, we need to import useSelector and useDispatch from react-redux to interact with the store.

• useSelector is used to read data from the Redux store.

• useDispatch is used to send actions to the Redux store (e.g., to update the counter).

Counter.jsx

import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "../app/features/counter/counterSlice";

const Counter = () => {
  // Read the data from the 'store'

  const count = useSelector((state) => state.counter.value);
  //   changeing the data by sending 'actions' to the store
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch(increment());
  };
  const handleDecrement = () => {
    dispatch(decrement());
  };
  return (
    <div>
      {count}
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
};
export default Counter;

1. Increment: Clicking the Increment button dispatches increment(), increasing counter.value by 1.

2. Decrement: Clicking the Decrement button dispatches decrement(), decreasing counter.value by 1.

• The useSelector hook reads the current value of counter.value from the Redux store.

• The useDispatch hook sends the increment or decrement action to modify the state.