Building a Simple Counter with NgRx in Angular

This challenge guides you through implementing a basic counter application using NgRx in an Angular project. NgRx is a powerful state management library for Angular applications, enabling predictable state management and simplifying complex application logic. Successfully completing this challenge will demonstrate your understanding of NgRx core concepts like actions, reducers, selectors, and effects.

Problem Description

You are tasked with creating a simple Angular application that displays a counter value and provides buttons to increment and decrement the counter. This application should utilize NgRx for state management. The counter's state should be managed centrally within the NgRx store, and UI updates should be driven by changes in the store.

Key Requirements:

• State: The application's state should consist of a single property: count (a number, initialized to 0).
• Actions: Define two actions: Increment and Decrement.
• Reducer: Implement a reducer that handles these actions, updating the count state accordingly.
• Store: Create an NgRx store that holds the counter state and dispatches actions.
• Component: Develop an Angular component that displays the current counter value and provides buttons to trigger the Increment and Decrement actions.
• Selectors: Implement a selector to retrieve the current count value from the store for display in the component.

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 UI should update immediately in response to each button click.

Edge Cases to Consider:

• The counter should not go below 0 when decrementing. The reducer should handle this.

Examples

Example 1:

Input: Initial state: { count: 0 }, User clicks "Increment" button.
Output: State: { count: 1 }, Component displays: "1"
Explanation: The Increment action is dispatched, the reducer updates the count to 1, and the component reflects the new state.

Example 2:

Input: Initial state: { count: 5 }, User clicks "Decrement" button.
Output: State: { count: 4 }, Component displays: "4"
Explanation: The Decrement action is dispatched, the reducer updates the count to 4, and the component reflects the new state.

Example 3:

Input: Initial state: { count: 0 }, User repeatedly clicks "Decrement" button.
Output: State: { count: 0 }, Component displays: "0"
Explanation: The Decrement action is dispatched repeatedly, but the reducer prevents the count from going below 0.

Constraints

• NgRx Version: Use the latest stable version of NgRx.
• Angular Version: Assume Angular 14 or higher.
• Component Structure: The component should be relatively simple, focusing on demonstrating NgRx integration. Avoid complex styling or layout.
• Performance: The solution should be performant enough for a simple counter application. No specific performance metrics are required.
• No Effects Required: For this challenge, focus on actions, reducers, and selectors. Effects are not required.

Notes

• Start by setting up a new Angular project if you don't have one already.
• Install the necessary NgRx packages: @ngrx/store, @ngrx/effects, @ngrx/entity. (Remember, effects are not required for this challenge, but the installation is often done together).
• Consider using the useSelector hook from @ngrx/store in your component to access the state.
• Think about how to structure your actions, reducers, and selectors for clarity and maintainability.
• Focus on demonstrating a clear understanding of the core NgRx concepts. A well-structured and readable solution is more important than overly complex features.