Getting Started with Redux Toolkit: A Beginner's Guide

Redux is a powerful state management library but setting it up can be overwhelming for beginners. Thankfully, Redux Toolkit (RTK) simplifies the process by providing best practices out of the box. In this guide, we'll go through the step-by-step setup of Redux Toolkit in a React project.

Why Use Redux Toolkit?

Redux Toolkit offers several advantages over traditional Redux setup:

Less boilerplate: Simplifies reducers and actions.

Built-in best practices: Encourages good patterns.

Better developer experience: Comes with built-in support for debugging and async handling.

Let's dive into the setup process!

Step 1: Create a React Project

If you don’t have a React project already, create one using Vite (recommended) or Create React App:
npm create vite@latest my-app --template react
cd my-app
npm install

Step 2: Install Redux Toolkit and React-Redux

Run the following command to install Redux Toolkit and React-Redux:
npm install @reduxjs/toolkit react-redux

Step 3: Create a Redux Store

Inside your project, create a folder called redux and add a store.js file:

// src/redux/store.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

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

Step 4: Create a Slice

Create a new file counterSlice.js inside the redux folder:

// src/redux/counterSlice.js
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

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

Step 5: Provide the Store to the App

Wrap your app with the Redux Provider in main.jsx (Vite) or index.js:

// src/main.jsx (Vite)
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./redux/store";
import App from "./App";

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

Step 6: Use Redux in a Component

Now, let's connect Redux to a React component. Open App.jsx and modify it like this:

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

function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Redux Toolkit Counter</h1>
      <h2>{count}</h2>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
    </div>
  );
}

export default App;

Step 7: Run the App
Start the development server:
npm run dev

Conclusion

Redux Toolkit makes managing global state easier by reducing boilerplate an
d enforcing best practices. This guide covered the basic setup, but RTK also supports advanced features like async thunks and middleware.

If you found this helpful, leave a comment or follow me for more React tips!