Lesson 28 — useReducer + Context API (Complete State Management Pattern)

🧭 Introduction

In real-world React applications, state management quickly becomes complex. Managing authentication, user data, loading states, errors, and actions using only useState can lead to scattered and hard-to-maintain code.

To solve this cleanly, professional React applications use a combination of:

• Context API → for global state sharing
• useReducer Hook → for predictable state updates

This lesson teaches you the complete and industry-standard pattern for state management in React.

❓ Why Combine useReducer with Context API?

❌ Problems with only Context API + useState

• Too many useState hooks
• Scattered update logic
• Difficult debugging
• Poor scalability

✅ Benefits of useReducer + Context API

✔ Centralized state logic
✔ Predictable state changes
✔ Clean separation of concerns
✔ Scales well for large apps

This pattern is often called:

“Mini Redux Pattern” (without external libraries)

🧠 When Should You Use This Pattern?

✅ Authentication systems
✅ Global app settings
✅ User profile management
✅ Dashboards
✅ Medium to large applications

🏗 High-Level Architecture

UI → dispatch(action)
      ↓
   Reducer (logic)
      ↓
   New State
      ↓
 Context Provider
      ↓
 UI updates everywhere

🧩 Project Structure (Recommended)

src/
 ├── context/
 │    ├── AuthContext.jsx
 │    └── authReducer.js
 ├── components/
 │    ├── Login.jsx
 │    └── Dashboard.jsx
 └── App.jsx

🛠 Step-by-Step Implementation

✅ Step 1: Create Reducer Logic

📄 context/authReducer.js

export const initialState = {
  user: null,
  isAuthenticated: false
};

export const authReducer = (state, action) => {
  switch (action.type) {
    case "LOGIN":
      return {
        user: action.payload,
        isAuthenticated: true
      };

    case "LOGOUT":
      return {
        user: null,
        isAuthenticated: false
      };

    default:
      return state;
  }
};

✔ Reducer contains all state update logic
✔ Easy to debug and test

✅ Step 2: Create Context with useReducer

📄 context/AuthContext.jsx

import { createContext, useReducer } from "react";
import { authReducer, initialState } from "./authReducer";

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [state, dispatch] = useReducer(authReducer, initialState);

  const login = (user) => {
    dispatch({ type: "LOGIN", payload: user });
  };

  const logout = () => {
    dispatch({ type: "LOGOUT" });
  };

  return (
    <AuthContext.Provider value={{ state, login, logout }}>
      {children}
    </AuthContext.Provider  >
  );
};

export default AuthContext;

✔ Context handles global access
✔ Reducer handles logic

✅ Step 3: Wrap Application with Provider

📄 App.jsx

import { AuthProvider } from "./context/AuthContext";
import Login from "./components/Login";
import Dashboard from "./components/Dashboard";

function App() {
  return (
    <AuthProvider>
      <Login />
      <Dashboard />
    </AuthProvider>
  );
}

export default App;

✅ Step 4: Login Component (Dispatch Action)

📄 components/Login.jsx

import { useContext } from "react";
import AuthContext from "../context/AuthContext";

const Login = () => {
  const { login } = useContext(AuthContext);

  const handleLogin = () => {
    const userData = {
      name: "Avni",
      role: "Admin"
    };
    login(userData);
  };

  return <button onClick={handleLogin}>Login</button>;
};

export default Login;

✅ Step 5: Dashboard Component (Consume State)

📄 components/Dashboard.jsx

import { useContext } from "react";
import AuthContext from "../context/AuthContext";

const Dashboard = () => {
  const { state, logout } = useContext(AuthContext);

  if (!state.isAuthenticated) {
    return <p>Please login first</p>;
  }

  return (
    <>
      <h2>Welcome, {state.user.name} 👋</h2>
      <p>Role: {state.user.role}</p>
      <button onClick={logout}>Logout</button>
    </>
  );
};

export default Dashboard;

🔄 Data Flow Explained

1️⃣ UI triggers login()
2️⃣ dispatch() sends action
3️⃣ Reducer updates state
4️⃣ Context provides new state
5️⃣ All components re-render automatically

🆚 useState vs useReducer + Context

⚠ Common Mistakes

❌ Putting logic inside components
❌ Mutating state directly
❌ Forgetting default reducer case
❌ Overusing context for local state

🎯 Best Practices

✅ Keep reducers pure
✅ Store reducers separately
✅ Use constants for action types
✅ Combine with LocalStorage for persistence

❓ FAQs — useReducer + Context API

🔹 Is this pattern better than Redux?

For small to medium apps, yes.
For very large apps, Redux still has advantages.

🔹 Can I have multiple reducers?

Yes. Separate reducers for auth, theme, settings, etc.

🔹 Should beginners learn this?

Yes, after mastering useState and Context API.

🔹 Is this pattern used in real projects?

Absolutely. This is a professional industry standard.

🧠 Quick Recap

✔ Context API shares global state
✔ useReducer manages complex logic
✔ Clean, predictable data flow
✔ Perfect for real-world applications

🎉 Conclusion

The useReducer + Context API pattern is one of the most important state management techniques in React. It brings structure, scalability, and professionalism to your applications — without external libraries.

After mastering this lesson, you are thinking like a real React developer 🚀

👉 Next Lesson (SECTION 6 — Performance & Optimization):
Lesson 29 — React Memo, useMemo & useCallback Explained