React Reducer Counter

🎯 Purpose

This mini project demonstrates how to manage related and complex state in React using useReducer instead of multiple useState hooks.

The goal is to understand how state transitions can be centralized and handled through explicit actions.

---

🧩 React Concepts Used

• useReducer
• Action-based state updates
• State immutability
• Component separation
• Predictable state transitions

---

📝 Application Structure

• Counter → Displays the current counter value
• Controls → Dispatches actions to update the state
• Reducer → Handles all state transitions in a single place
• History → Stores previous counter values to support undo behavior

---

❓ Why This Approach?

useReducer

useReducer is preferred because:

• Multiple state values are logically related
• State updates depend on previous state
• Actions clearly describe what happened
• State logic is separated from UI components

This makes the application easier to reason about as it grows.

---

⚠️ Avoided Anti-Patterns

• Scattered state logic across multiple components
• Direct mutation of state inside the reducer
• Using multiple useState hooks for tightly coupled state

---

📌 Key Takeaways

• useReducer centralizes complex state logic
• Reducers must always return new state objects
• Actions make state transitions predictable
• Separating state logic from UI improves maintainability