Managing Feature State with NgRx in an Angular Component

This challenge focuses on implementing a simple feature state management system using NgRx in an Angular component. Feature state management is crucial for building complex Angular applications, allowing you to centralize and predictably manage data related to specific features, improving maintainability and testability. You'll be building a counter component that utilizes NgRx to manage its count state.

Problem Description

You are tasked with creating an Angular component that displays a counter and provides buttons to increment and decrement the counter value. This component should leverage NgRx to manage the counter's state.

What needs to be achieved:

1. Create an NgRx store for the counter feature.
2. Define actions to increment and decrement the counter.
3. Create a reducer to handle these actions and update the counter state.
4. Implement the counter component that:
   • Selects the counter value from the store.
   • Displays the counter value.
   • Dispatches the increment and decrement actions when the corresponding buttons are clicked.

Key Requirements:

• Use NgRx selectors to retrieve the counter value from the store.
• Ensure the component re-renders whenever the counter value changes.
• The initial counter value should be 0.
• The component should handle incrementing and decrementing the counter.

Expected Behavior:

• The component should initially display "0".
• Clicking the "Increment" button should increase the counter value by 1.
• Clicking the "Decrement" button should decrease the counter value by 1.
• The displayed counter value should update immediately after each increment or decrement.

Edge Cases to Consider:

• Decrementing the counter below 0 should result in a value of 0 (do not allow negative values).

Examples

Example 1:

Input: Initial state: 0, Increment button clicked once.
Output: Counter displays: 1
Explanation: The increment action is dispatched, the reducer updates the state to 1, and the component re-renders to display 1.

Example 2:

Input: Initial state: 5, Decrement button clicked twice.
Output: Counter displays: 3
Explanation: The decrement action is dispatched twice, the reducer updates the state to 3, and the component re-renders to display 3.

Example 3:

Input: Initial state: 0, Decrement button clicked once.
Output: Counter displays: 0
Explanation: The decrement action is dispatched, the reducer updates the state to 0 (preventing negative values), and the component re-renders to display 0.

Constraints

• You must use NgRx version 8 or higher.
• The component should be a functional component.
• The counter value should be a number.
• The component should be relatively simple and focused on demonstrating NgRx state management. Avoid unnecessary complexity.
• The solution should be well-structured and readable.

Notes

• Consider using useSelector from react-redux (or its Angular equivalent) to efficiently subscribe to the store and trigger re-renders.
• Think about how to organize your NgRx store (actions, reducers, selectors) for clarity and maintainability.
• Focus on the core concepts of NgRx: actions, reducers, and selectors.
• You can use any Angular UI library (e.g., Angular Material) for styling, but the focus is on the NgRx implementation. Simple HTML is perfectly acceptable.
• This challenge assumes you have a basic understanding of Angular and NgRx.