So far in our React journey, we’ve managed state using useState, useReducer, and even Context API. These tools are powerful, but when apps grow larger, managing state across multiple components can become messy.

This is where Redux in React comes in. Redux is a state management library that helps you keep state in a single centralized store, making it easier to manage, debug, and scale your app.

Before we move to the modern Redux Toolkit (next blog), today we’ll focus on the core concepts of Redux so you understand the foundation clearly.

Why Do We Need Redux in React?

Imagine a React app where the Navbar shows the user’s login status, the Profile Page displays their info, and the Dashboard needs the same data.

With just useState, you’d have to pass props down multiple levels (prop drilling). Context API helps, but when the app grows, debugging and managing updates can be tricky.

Redux solves this by:

• Keeping all state in one store.
• Allowing components to access state directly, without drilling props.
• Providing predictable updates using pure functions called reducers.

Core Concepts of Redux in React

There are three main parts in Redux:

1. Store – the global state container.
2. Actions – plain JavaScript objects that describe what should change.
3. Reducers – functions that update the state based on actions.

Let’s go step by step.

Step 1: Create a Redux Store

First, install Redux (later we’ll use Redux Toolkit, but for now let’s see vanilla Redux).

• Redux Official Documentation
• React Redux Docs

npm install redux react-redux

npm install redux react-redux

Now, create a store.js:

import { createStore } from "redux";

// Initial state
const initialState = {
  count: 0,
};

// Reducer function
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

// Create store
const store = createStore(counterReducer);

export default store;

import { createStore } from "redux";

// Initial state
const initialState = {
  count: 0,
};

// Reducer function
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

// Create store
const store = createStore(counterReducer);

export default store;

👉 Here:

• initialState holds our starting state.
• counterReducer updates state based on actions.
• createStore creates a centralized Redux store.

Step 2: Provide the Store to React

In index.js, wrap your app with Provider from react-redux.

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

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

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

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

👉 Now every component in our app can access the Redux store.

Step 3: Dispatch Actions

Actions are objects that tell Redux what happened. Example:

{ type: "INCREMENT" }
{ type: "DECREMENT" }

{ type: "INCREMENT" }
{ type: "DECREMENT" }

We send actions to the store using the dispatch function.

Step 4: Connect Components with Redux

Inside App.js:

import React from "react";
import { useSelector, useDispatch } from "react-redux";

function App() {
  const count = useSelector((state) => state.count); // get state
  const dispatch = useDispatch(); // send actions

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Redux Counter</h1>
      <h2>{count}</h2>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
    </div>
  );
}

export default App;

import React from "react";
import { useSelector, useDispatch } from "react-redux";

function App() {
  const count = useSelector((state) => state.count); // get state
  const dispatch = useDispatch(); // send actions

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Redux Counter</h1>
      <h2>{count}</h2>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
    </div>
  );
}

export default App;

👉 Here:

• useSelector reads data from Redux store.
• useDispatch sends actions to the store.
• Reducer updates the store → components re-render automatically.

Flow of Redux in React

Here’s the cycle:

1. Component → dispatch(action)
2. Reducer receives action → updates state
3. Store notifies → subscribed components update

When to Use Redux in React?

Use Redux when:

• App has complex state (authentication, user data, UI states).
• Many components need access to the same data.
• You want predictable debugging (Redux DevTools is amazing!).

Avoid Redux if:

• Your app is small and useState or Context API is enough.

Conclusion

In this blog, we explored Redux in React (Core Concepts). You learned:

• Why Redux is needed.
• Store, Actions, Reducers.
• Connecting Redux with React using useSelector and useDispatch.

This is the foundation of Redux. In the next blog (Day 21), we’ll move to Redux Toolkit, the modern and much simpler way of writing Redux code.