Implementing Reducers for State Management in an Angular Application

This challenge focuses on implementing reducers within an Angular application to manage application state effectively. Reducers are a core concept in state management libraries like NgRx, providing a predictable and centralized way to update state based on actions. Successfully completing this challenge demonstrates understanding of immutable state updates and the reducer pattern.

Problem Description

You are tasked with building a simple counter application in Angular and implementing reducers to manage the counter's state. The application should have a component that displays the current counter value and provides buttons to increment and decrement the counter. The state should be managed using reducers, ensuring a clear separation of concerns and predictable state updates.

What needs to be achieved:

1. Create an Angular component with a display for the counter value and buttons for incrementing and decrementing.
2. Define a simple state interface for the counter (e.g., CounterState with a count property).
3. Implement a reducer function that takes the current state and an action and returns a new state.
4. Define action types (e.g., Increment, Decrement).
5. Integrate the reducer into a simple state management system (you don't need to use a full-fledged library like NgRx for this challenge; a basic service will suffice).
6. Connect the component to the state management service to display the counter value and dispatch actions when the buttons are clicked.

Key Requirements:

• Immutability: The reducer must return a new state object instead of modifying the existing one. This is crucial for predictable state management and change detection.
• Action Handling: The reducer must handle the Increment and Decrement actions correctly.
• Clear Separation: The component should not directly manipulate the state. It should dispatch actions, and the reducer should handle the state updates.
• Type Safety: Utilize TypeScript to ensure type safety throughout the implementation.

Expected Behavior:

• Initially, the counter value should be displayed as 0.
• Clicking the "Increment" button should increase the counter value by 1.
• Clicking the "Decrement" button should decrease the counter value by 1.
• The component should re-render whenever the counter value changes.

Edge Cases to Consider:

• Decrementing the counter below 0. (The counter should remain at 0 in this case).
• Handling unexpected or unknown actions (the reducer should gracefully handle actions it doesn't recognize, typically by returning the current state unchanged).

Examples

Example 1:

Input: Initial state: { count: 0 }, Action: { type: 'Increment' }
Output: { count: 1 }
Explanation: The reducer receives the initial state and the 'Increment' action. It returns a new state object with the count incremented to 1.

Example 2:

Input: Current state: { count: 5 }, Action: { type: 'Decrement' }
Output: { count: 4 }
Explanation: The reducer receives the current state and the 'Decrement' action. It returns a new state object with the count decremented to 4.

Example 3:

Input: Current state: { count: -2 }, Action: { type: 'Decrement' }
Output: { count: -2 }
Explanation: The reducer receives the current state and the 'Decrement' action. Since decrementing would result in a negative value, the state remains unchanged.

Constraints

• Angular Version: Angular 14 or higher.
• TypeScript: Use TypeScript for all code.
• State Management: You are not required to use a full-fledged state management library like NgRx. A simple service to hold and update the state is sufficient.
• Performance: While performance is not the primary focus, avoid unnecessary re-renders. Ensure that the component only re-renders when the counter value changes.
• Code Structure: Maintain a clean and well-structured codebase.

Notes

• Consider using a simple BehaviorSubject or Subject within your state management service to manage the state and notify the component of changes.
• The reducer function should be pure – it should not have any side effects.
• Focus on demonstrating the core principles of reducers: immutability and predictable state updates.
• You can use any Angular best practices you are familiar with.
• The goal is to demonstrate understanding of the reducer pattern, not to build a production-ready state management solution.