[NG India] Event-Based State Management with NgRx SignalStore

Event-driven architecture adds a layer of indirection that enhances decoupling, improves data flow predictability, and supports the scaling of complex systems.

While SignalStore does not natively support an event-based model, its flexible and highly extensible design opens the door to integrating various functionalities and applying diverse state management patterns.

In this talk, we will explore how event-driven principles can be used with SignalStore to enhance and scale the state management layer in complex Angular applications.

Transcript

1. Event-Based State Management with NgRx SignalStore Marko Stanimirović
2. Event-Driven Architecture
3. A software architecture pattern in which system components communicate through events. Event-Driven Architecture
4. Event-Driven Architecture Producer 1 Producer 2 Consumer 1 Event Bus Consumer 2 Consumer 3
5. Event-Driven Architecture Producer 1 Producer 2 Consumer 1 Event Bus Consumer 2 Consumer 3 Event A Event B publishes
6. Event-Driven Architecture Producer 1 Producer 2 Consumer 1 Event Bus Consumer 2 Consumer 3 Event A Event B Event A Event B Event B Event A publishes notifies
7. Producer 1 Producer 2 Consumer 1 Event Bus Consumer 2 Consumer 3 Event A Event B Event A Event B Event B Event A publishes notifies Event-Driven Architecture - Loose Coupling: Components don't need to know about each other. - Scalability: Individual components can be easily scaled. - Flexibility: As long as the event format is maintained, components can be changed or replaced independently. - Extensibility: New components can be introduced without changing existing code.
8. Popularity of Event-Based Solutions 2010s Time
9. Popularity of Event-Based Solutions Internet of Things Cloud Computing Microservices 2010s Time
10. 2010s Popularity of Event-Based Solutions Time Internet of Things Cloud Computing Microservices
11. Marko Stanimirović @MarkoStDev ★ Principal Frontend Engineer at SMG ★ Core Team at NgRx and AnalogJS ★ Google Developer Expert in Angular ★ Angular Belgrade Organizer ★ Hobby Musician 🎸 ★ M.Sc. in Software Engineering
12. Flux
13. Flux Action Dispatcher Store
14. Flux Action Dispatcher Store View
15. Flux Action Dispatcher Store View Action
16. Flux: Main Features Action Dispatcher Store View Action - Unidirectional Data Flow - Separation of Concerns - Scalable Architecture - Improved Debugging
17. Flux: Popular Implementations Action Dispatcher Store View Action Redux NgRx VueX
19. Gartner Hype Cycle: Flux Evolution Time Expectations
20. Gartner Hype Cycle: Flux Evolution Time Expectations 2014: Flux Introduced
21. Gartner Hype Cycle: Flux Evolution Time Expectations 2014: Flux Introduced 2016: Redux Peak Popularity
22. Gartner Hype Cycle: Flux Evolution Time Expectations 2014: Flux Introduced 2016: Redux Peak Popularity 2019: Rise of Alternatives
23. Gartner Hype Cycle: Flux Evolution Time Expectations 2014: Flux Introduced 2016: Redux Peak Popularity Stable Mature Usage 2019: Rise of Alternatives
24. Gartner Hype Cycle: Flux Evolution Time Expectations 2014: Flux Introduced 2016: Redux Peak Popularity Stable Mature Usage 2019: Rise of Alternatives
25. Lightweight Solutions Zustand ComponentStore Pinia
26. Lightweight Solutions - Reduced Complexity - Less “Boilerplate” Code - Gradual Learning Curve Zustand ComponentStore Pinia
27. NgRx SignalStore
28. A lightweight, flexible, and extensible state management solution that provides native support for Angular Signals. SignalStore
29. export const BooksStore = signalStore( );
30. type BooksState = { books: Book[] }; export const BooksStore = signalStore( withState<BooksState>({ books: [] }), );
31. type BooksState = { books: Book[] }; export const BooksStore = signalStore( withState<BooksState>({ books: [] }), withComputed(({ books }) *> ({ totalBooks: computed(() *> books().length), freeBooks: computed(() *> books().filter(({ price }) *> price **= 0)), })), );
32. type BooksState = { books: Book[] }; export const BooksStore = signalStore( withState<BooksState>({ books: [] }), withComputed(({ books }) *> ({ totalBooks: computed(() *> books().length), freeBooks: computed(() *> books().filter(({ price }) *> price **= 0)), })), withMethods((store) *> ({ addBook(book: Book): void { patchState(store, { books: [**.store.books(), book] }); }, })), );
33. @Component({ template: ` <h2>Add Book*/h2> <book-form (addBook)="store.addBook($event)" *> <h2>All Books*/h2> <book-list [books]="store.books()" *> <h2>Free Books*/h2> <book-list [books]="store.freeBooks()" *> `, providers: [BooksStore], }) export class BooksComponent { readonly store = inject(BooksStore); }
34. @Component({ template: ` <h2>Add Book*/h2> <book-form (addBook)="store.addBook($event)" *> <h2>All Books*/h2> <book-list [books]="store.books()" *> <h2>Free Books*/h2> <book-list [books]="store.freeBooks()" *> `, providers: [BooksStore], }) export class BooksComponent { readonly store = inject(BooksStore); }
35. @Component({ template: ` <h2>Add Book*/h2> <book-form (addBook)="store.addBook($event)" *> <h2>All Books*/h2> <book-list [books]="store.books()" *> <h2>Free Books*/h2> <book-list [books]="store.freeBooks()" *> `, providers: [BooksStore], }) export class BooksComponent { readonly store = inject(BooksStore); }
36. But… What about more complex use cases?
37. ProductDetailsPage ★ ____ ★ ____ ★ ____ Add to Cart
38. ProductDetailsPage ★ ____ ★ ____ ★ ____ Add to Cart
39. ProductDetailsPage ★ ____ ★ ____ ★ ____ CartStore add product to cart Add to Cart
40. ProductDetailsPage ★ ____ ★ ____ ★ ____ CartStore InventoryStore add product to cart reduce available quantity Add to Cart
41. ProductDetailsPage ★ ____ ★ ____ ★ ____ CartStore InventoryStore RecommendationsStore add product to cart reduce available quantity load recommended products Add to Cart
42. @ngrx/signals/events
43. @ngrx/signals/events SignalStore plugin for event-based state management.
44. @ngrx/signals/events Event Dispatcher Store (reducer, effects) View Event SignalStore plugin for event-based state management.
45. export const productDetailsPageEvents = eventGroup({ source: 'Product Details Page', events: { addedToCart: props<{ product: Product }>(), }, });
46. export const productDetailsPageEvents = eventGroup({ source: 'Product Details Page', events: { addedToCart: props<{ product: Product }>(), }, }); @Component({ ** **. */ }) export class ProductDetailsComponent { readonly dispatch = injectDispatch(productDetailsPageEvents); addToCart(product: Product) { this.dispatch.addedToCart({ product }); } }
47. export const productDetailsPageEvents = eventGroup({ source: 'Product Details Page', events: { addedToCart: props<{ product: Product }>(), }, }); @Component({ ** **. */ }) export class ProductDetailsComponent { readonly dispatch = injectDispatch(productDetailsPageEvents); addToCart(product: Product) { this.dispatch.addedToCart({ product }); } }
48. export const CartStore = signalStore( withReducer( when( productDetailsPageEvents.addedToCart, ({ product }) *> ({ ** add to cart */ }), ), ), );
49. export const CartStore = signalStore( withReducer( when( productDetailsPageEvents.addedToCart, ({ product }) *> ({ ** add to cart */ }), ), ), ); export const InventoryStore = signalStore( withReducer( when( productDetailsPageEvents.addedToCart, ({ product }) *> ({ ** reduce quantity */ }), ), ), );
50. export const CartStore = signalStore( withReducer( when( productDetailsPageEvents.addedToCart, ({ product }) *> ({ ** add to cart */ }), ), ), ); export const InventoryStore = signalStore( withReducer( when( productDetailsPageEvents.addedToCart, ({ product }) *> ({ ** reduce quantity */ }), ), ), ); export const RecommendationsStore = signalStore( withReducer( when( productDetailsPageEvents.addedToCart, setPending ) ), withEffects((_, events = inject(Events)) *> ({ loadRecommendations$: events .on(productDetailsPageEvents.addedToCart) .pipe(** load recommended products */), })), );
51. Demo
52. - Combines proven patterns from Flux, NgRx Store, and RxJS. - Seamlessly integrates with existing SignalStore features. - Extends Flux architecture with powerful customization options. - Unifies local and global state management with a single approach. @ngrx/signals/events
53. Source Code github.com/markostanimirovic
54. NgRx Signals Usage (March 2024)
55. NgRx Signals Usage (April 2025) 🚀
56. X: @ngrx_io LinkedIn: NgRx Discord: discord.gg/ngrx Docs: ngrx.io Blog: dev.to/ngrx GitHub: github.com/ngrx/platform Workshops: ti.to/ngrx
57. Official NgRx Workshops in 2025
58. Marko Stanimirović @MarkoStDev Thank You!