Reactive Data Management with Angular Effects

Angular Effects provide a powerful way to manage side effects in a reactive and predictable manner. This challenge will guide you through implementing a simple counter application using Angular Effects to handle incrementing and decrementing the counter value, as well as logging these actions. This is a common pattern for handling asynchronous operations, API calls, and other side effects in Angular applications.

Problem Description

You are tasked with building a counter component that allows users to increment and decrement a counter value. Instead of directly modifying the counter value in the component class, you should use Angular Effects to manage these actions. The effects should:

1. Increment Effect: When an "Increment" action is dispatched, the effect should increment the counter value by 1.
2. Decrement Effect: When a "Decrement" action is dispatched, the effect should decrement the counter value by 1.
3. Logging Effect: After every action (Increment, Decrement), the effect should log a message to the console indicating the action that was performed and the current counter value. The log message should be in the format: "Action: [Action Name], Counter: [Counter Value]".

You will need to create:

• An Action: Increment and Decrement
• A Reducer: To update the counter state based on the actions.
• Effects: To handle the side effects (incrementing/decrementing the counter and logging).
• A Store: To hold the counter state.
• A Component: To dispatch the actions and display the counter value.

Expected Behavior:

• The component should display the current counter value.
• Clicking the "Increment" button should dispatch the Increment action, which should increment the counter value and log a message.
• Clicking the "Decrement" button should dispatch the Decrement action, which should decrement the counter value and log a message.
• The counter value should be updated reactively in the component.
• The console should display log messages for each action performed.

Examples

Example 1:

Initial Counter Value: 0
User clicks "Increment" button once.

Output:
Action: Increment, Counter: 1

Example 2:

Initial Counter Value: 5
User clicks "Decrement" button twice.

Output:
Action: Decrement, Counter: 3
Action: Decrement, Counter: 2

Example 3: (Edge Case - Decrementing below zero)

Initial Counter Value: -2
User clicks "Decrement" button once.

Output:
Action: Decrement, Counter: -3

Constraints

• You must use Angular's @ngrx/store, @ngrx/effects, and @ngrx/entity libraries.
• The counter value should be an integer.
• The logging effect should log to the browser's console.
• The solution should be well-structured and maintainable.
• The component should be relatively simple, focusing on dispatching actions and displaying the counter value. No complex UI elements are required.

Notes

• Consider using createEffect from @ngrx/effects for defining your effects.
• Think about how to handle the state update within the reducer.
• Remember that effects are triggered by actions, so ensure your actions are correctly dispatched from the component.
• Use pipe operator to handle multiple actions in a single effect.
• The initial counter value should be 0.
• Focus on the core logic of managing side effects with Angular Effects. Styling and advanced UI features are not required.