React Redux Counter App (Step-by-Step Example)

📌 INTRODUCTION

Redux is one of the most important state management libraries used with React. It helps manage application state in a centralized way.

A Counter App using React Redux is a beginner-friendly program that helps you understand:

• Global state management
• Redux store
• Actions
• Reducers
• React-Redux integration

In this program, we will create a simple counter app where the value can be increased, decreased, and reset using Redux.

---

📘 PROBLEM STATEMENT

👉 Create a counter app using React Redux.

---

💡 CONCEPTS USED

• React
• Redux Toolkit
• React-Redux
• Store
• Slice
• Actions and Reducers
• useSelector
• useDispatch

---

🧠 LOGIC EXPLANATION

The application works in the following way:

1. Create a Redux store
2. Create a slice for counter state
3. Define actions such as increment, decrement, and reset
4. Connect Redux store with React app
5. Use useSelector() to access state
6. Use useDispatch() to trigger actions

---

⚙️ STEP 1: CREATE REACT APP

Open terminal and run:

npx create-react-app redux-counter-app
cd redux-counter-app

---

⚙️ STEP 2: INSTALL REQUIRED PACKAGES

Install Redux Toolkit and React-Redux:

npm install @reduxjs/toolkit react-redux

---

📁 PROJECT STRUCTURE

redux-counter-app/
│
├── src/
│   ├── app/
│   │   └── store.js
│   ├── features/
│   │   └── counter/
│   │       └── counterSlice.js
│   ├── App.js
│   └── index.js

---

💻 PROGRAM CODE

---

Step 1: Create src/app/store.js

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

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

---

Step 2: Create src/features/counter/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;
    },
    reset: (state) => {
      state.value = 0;
    }
  }
});

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

---

Step 3: Update src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./app/store";

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

---

Step 4: Update src/App.js

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

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

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>React Redux Counter App</h1>
      <h2>Count: {count}</h2>

      <button onClick={() => dispatch(increment())} style={{ margin: "5px" }}>
        Increment
      </button>

      <button onClick={() => dispatch(decrement())} style={{ margin: "5px" }}>
        Decrement
      </button>

      <button onClick={() => dispatch(reset())} style={{ margin: "5px" }}>
        Reset
      </button>
    </div>
  );
}

export default App;

---

▶️ HOW TO RUN THE PROGRAM

Run the application:

npm start

Open browser:

http://localhost:3000

---

🖥️ OUTPUT

Initial screen:

React Redux Counter App
Count: 0

[Increment] [Decrement] [Reset]

After clicking Increment:

Count: 1

After clicking Decrement:

Count: 0

After clicking Reset:

Count: 0

---

🔍 STEP-BY-STEP EXPLANATION

1. Create Redux Store

configureStore({
  reducer: {
    counter: counterReducer
  }
});

The store keeps the global application state.

---

2. Create Slice

createSlice({
  name: "counter",
  initialState,
  reducers: { ... }
});

A slice contains:

• state
• reducer logic
• actions

---

3. Define Reducers

increment: (state) => {
  state.value += 1;
}

Reducers define how the state changes.

---

4. Wrap App with Provider

<Provider store={store}>
  <App />
</Provider>

This makes Redux store available to all React components.

---

5. Access State with useSelector()

const count = useSelector((state) => state.counter.value);

This reads the current counter value from Redux store.

---

6. Update State with useDispatch()

dispatch(increment())

This sends an action to Redux.

---

🎯 IMPORTANT REDUX TERMS

Term	Meaning
Store	Central place where state is stored
Action	Object that tells Redux what to do
Reducer	Function that updates state
Slice	Combination of state, reducers, and actions
Provider	Makes Redux store available to components
useSelector	Reads data from store
useDispatch	Sends action to store

---

⚡ WHY REDUX TOOLKIT IS USED

Redux Toolkit simplifies Redux code.

Without Redux Toolkit, Redux code becomes longer and more complex.
With Redux Toolkit:

• Less boilerplate code
• Easier store setup
• Cleaner reducer logic
• Better beginner experience

---

⚡ ADVANCED VERSION: INCREMENT BY CUSTOM VALUE

You can add a new action:

Update counterSlice.js

incrementByAmount: (state, action) => {
  state.value += action.payload;
}

Export it:

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

Use in App.js:

<button onClick={() => dispatch(incrementByAmount(5))}>
  Increment by 5
</button>

---

⚡ ADVANCED VERSION: ADD STYLING

<button
  onClick={() => dispatch(increment())}
  style={{
    backgroundColor: "green",
    color: "white",
    padding: "10px",
    border: "none",
    borderRadius: "5px"
  }}
>
  Increment
</button>

---

🌟 WHY THIS PROGRAM IS IMPORTANT

This program is important because it teaches:

• Global state management
• Redux basics
• React + Redux integration
• Centralized application data

It is often used in:

• dashboards
• shopping carts
• authentication systems
• large-scale React projects

---

📚 REAL-WORLD USE CASE

React Redux is used in:

• E-commerce websites
• Banking dashboards
• Admin panels
• Large React applications
• Cart systems
• User authentication state
• Multi-page apps with shared data

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is Redux?

👉 Redux is a state management library used to manage global state in applications.

---

Q2. What is Redux Toolkit?

👉 Redux Toolkit is the official, simplified way to write Redux logic.

---

Q3. What is a store in Redux?

👉 The store is the central place where application state is stored.

---

Q4. What is a reducer?

👉 A reducer is a function that updates the state based on an action.

---

Q5. What is a slice in Redux Toolkit?

👉 A slice is a collection of state, reducers, and generated actions.

---

Q6. What does useSelector() do?

👉 It reads data from the Redux store.

---

Q7. What does useDispatch() do?

👉 It sends actions to update the Redux state.

---

Q8. Why do we use Provider?

👉 It makes the Redux store available to all components in the app.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 React Router App – Program 27
👉 React Login Form Validation – Program 19
👉 React Counter App using useState – Program 6

---

📌 CONCLUSION

The React Redux Counter App is a great starting point for learning Redux. It helps you understand how state can be managed globally in a React application.

👉 Practice this example carefully, then extend it with custom values, styling, and multiple counters to strengthen your Redux concepts.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites