Refactor state management to event driven architecture.

[dimeloper]

Refactor state management to event-driven architecture

Overview

Migrated from traditional NgRx store pattern to event-driven architecture using NgRx Signals Events, implementing the Flux pattern for unidirectional data flow.

Key Changes

Architecture

• Implemented Flux pattern with event-driven state management
• Organized events into two groups: Page Events (user interactions) and API Events (API results)
• Established clear unidirectional data flow: View → Dispatcher → Effects → Reducer → State → View

State Management

• task.events.ts: Defined event groups using eventGroup() for all domain events
• task.reducer.ts: Pure state update functions responding to events with withReducer() and on()
• task.effects.ts: Side effect handlers for async operations with withEffects()
• task.store.ts: Composed store using withEntities, withState, withTaskReducer, withTaskEffects, and withEventLogging

Reusable Patterns

• with-event-logging.ts: Created reusable store feature for automatic event logging
• Detects and highlights error events automatically
• Accepts multiple event groups via Object.values() spreading

Documentation

• Comprehensive README update describing Flux architecture
• Documented event groups, data flow, store composition, and logging system
• Added example event flows for common operations

Benefits

• Predictable state updates through pure reducers
• Clear separation between user actions and API results
• Improved debugging with comprehensive event logging
• Type-safe event handling throughout the application
• Maintainable and testable architecture