NgRx Signal Store - A Deeper Dive

Transcript

1. NgRx Signal Store a deeper dive
2. THE CODEBASE NOBODY WANTED TO TOUCH
3. NgRx Signal Store a deeper dive
4. NgRx Signal Store a little deeper dive
5. What is signalStore() really?
6. SignalStores are just stateful services. " Marko Stanimirović
7. signalStore( withState(), withComputed(), withMethods( patchState() ) ); 1 2 3 4 5 6 7
8. signalStore( withState(), withComputed(), withMethods( patchState() ) ); 1 2 3 4 5 6 7 signalStore( 1 withState(), 2 withComputed(), 3 withMethods( 4 patchState() 5 ) 6 ); 7
9. signalStore( withState(), withComputed(), withMethods( patchState() ) ); 1 2 3 4 5 6 7 signalStore( 1 withState(), 2 withComputed(), 3 withMethods( 4 patchState() 5 ) 6 ); 7 withState(), signalStore( 1 2 withComputed(), 3 withMethods( 4 patchState() 5 ) 6 ); 7
10. signalStore( withState(), withComputed(), withMethods( patchState() ) ); 1 2 3 4 5 6 7 signalStore( 1 withState(), 2 withComputed(), 3 withMethods( 4 patchState() 5 ) 6 ); 7 withState(), signalStore( 1 2 withComputed(), 3 withMethods( 4 patchState() 5 ) 6 ); 7 withComputed(), signalStore( 1 withState(), 2 3 withMethods( 4 patchState() 5 ) 6 ); 7
11. signalStore( withState(), withComputed(), withMethods( patchState() ) ); 1 2 3 4 5 6 7 signalStore( 1 withState(), 2 withComputed(), 3 withMethods( 4 patchState() 5 ) 6 ); 7 withState(), signalStore( 1 2 withComputed(), 3 withMethods( 4 patchState() 5 ) 6 ); 7 withComputed(), signalStore( 1 withState(), 2 3 withMethods( 4 patchState() 5 ) 6 ); 7 withMethods( signalStore( 1 withState(), 2 withComputed(), 3 4 patchState() 5 ) 6 ); 7
12. signalStore( withState(), withComputed(), withMethods( patchState() ) ); 1 2 3 4 5 6 7 signalStore( 1 withState(), 2 withComputed(), 3 withMethods( 4 patchState() 5 ) 6 ); 7 withState(), signalStore( 1 2 withComputed(), 3 withMethods( 4 patchState() 5 ) 6 ); 7 withComputed(), signalStore( 1 withState(), 2 3 withMethods( 4 patchState() 5 ) 6 ); 7 withMethods( signalStore( 1 withState(), 2 withComputed(), 3 4 patchState() 5 ) 6 ); 7 patchState() signalStore( 1 withState(), 2 withComputed(), 3 withMethods( 4 5 ) 6 ); 7
13. const CounterStore = signalStore( withState({ count: 0 }), withComputed(({ count }) => ({ doubled: computed(() => count() * 2), })), withMethods((store) => ({ increment() { patchState(store, { count: store.count() + 1 }); } })) ); 1 2 3 4 5 6 7 8 9 10 11 12 13
14. State as signals
15. Derivations are computed
16. Changes go through patchState()
17. We have to talk about reactivity
18. type BookingState = { booking: Booking } export const BookingStore = signalStore( //... withMethods((store, service = ...) => ({ loadBooking: rxMethod<number>( exhaustMap((id) => service.load(id).pipe( tapResponse({ next: (booking) => patchState(store, { booking }), error: (err) => console.error(err) }) )) }), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14
19. type BookingState = { booking: Booking } export const BookingStore = signalStore( //... withMethods((store, service = ...) => ({ loadBooking: rxMethod<number>( exhaustMap((id) => service.load(id).pipe( tapResponse({ next: (booking) => patchState(store, { booking }), error: (err) => console.error(err) }) )) }), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 loadBooking: rxMethod<number>( type BookingState = { booking: Booking } 1 2 export const BookingStore = signalStore( 3 //... 4 withMethods((store, service = ...) => ({ 5 6 exhaustMap((id) => service.load(id).pipe( 7 tapResponse({ 8 next: (booking) => patchState(store, { booking }), 9 error: (err) => console.error(err) 10 }) 11 )) 12 }), 13 ); 14
20. type BookingState = { booking: Booking } export const BookingStore = signalStore( //... withMethods((store, service = ...) => ({ loadBooking: rxMethod<number>( exhaustMap((id) => service.load(id).pipe( tapResponse({ next: (booking) => patchState(store, { booking }), error: (err) => console.error(err) }) )) }), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 loadBooking: rxMethod<number>( type BookingState = { booking: Booking } 1 2 export const BookingStore = signalStore( 3 //... 4 withMethods((store, service = ...) => ({ 5 6 exhaustMap((id) => service.load(id).pipe( 7 tapResponse({ 8 next: (booking) => patchState(store, { booking }), 9 error: (err) => console.error(err) 10 }) 11 )) 12 }), 13 ); 14 exhaustMap((id) => service.load(id).pipe( tapResponse({ next: (booking) => patchState(store, { booking }), error: (err) => console.error(err) }) )) type BookingState = { booking: Booking } 1 2 export const BookingStore = signalStore( 3 //... 4 withMethods((store, service = ...) => ({ 5 loadBooking: rxMethod<number>( 6 7 8 9 10 11 12 }), 13 ); 14
21. @Component({ /* ... */ }) export class MyComponent { store = inject(BookingStore); constructor() { // executed one time store.loadBooking(42) // executed each time the signal changes const id = signal(42); store.loadBooking(id) // executed each time a new value is emitted const id$ = of(42, 43, 44); store.loadBooking(id$) } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
22. @Component({ /* ... */ }) export class MyComponent { store = inject(BookingStore); constructor() { // executed one time store.loadBooking(42) // executed each time the signal changes const id = signal(42); store.loadBooking(id) // executed each time a new value is emitted const id$ = of(42, 43, 44); store.loadBooking(id$) } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 store.loadBooking(42) @Component({ /* ... */ }) 1 export class MyComponent { 2 store = inject(BookingStore); 3 4 constructor() { 5 // executed one time 6 7 8 // executed each time the signal changes 9 const id = signal(42); 10 store.loadBooking(id) 11 12 // executed each time a new value is emitted 13 const id$ = of(42, 43, 44); 14 store.loadBooking(id$) 15 } 16 } 17
23. @Component({ /* ... */ }) export class MyComponent { store = inject(BookingStore); constructor() { // executed one time store.loadBooking(42) // executed each time the signal changes const id = signal(42); store.loadBooking(id) // executed each time a new value is emitted const id$ = of(42, 43, 44); store.loadBooking(id$) } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 store.loadBooking(42) @Component({ /* ... */ }) 1 export class MyComponent { 2 store = inject(BookingStore); 3 4 constructor() { 5 // executed one time 6 7 8 // executed each time the signal changes 9 const id = signal(42); 10 store.loadBooking(id) 11 12 // executed each time a new value is emitted 13 const id$ = of(42, 43, 44); 14 store.loadBooking(id$) 15 } 16 } 17 const id = signal(42); store.loadBooking(id) @Component({ /* ... */ }) 1 export class MyComponent { 2 store = inject(BookingStore); 3 4 constructor() { 5 // executed one time 6 store.loadBooking(42) 7 8 // executed each time the signal changes 9 10 11 12 // executed each time a new value is emitted 13 const id$ = of(42, 43, 44); 14 store.loadBooking(id$) 15 } 16 } 17
24. @Component({ /* ... */ }) export class MyComponent { store = inject(BookingStore); constructor() { // executed one time store.loadBooking(42) // executed each time the signal changes const id = signal(42); store.loadBooking(id) // executed each time a new value is emitted const id$ = of(42, 43, 44); store.loadBooking(id$) } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 store.loadBooking(42) @Component({ /* ... */ }) 1 export class MyComponent { 2 store = inject(BookingStore); 3 4 constructor() { 5 // executed one time 6 7 8 // executed each time the signal changes 9 const id = signal(42); 10 store.loadBooking(id) 11 12 // executed each time a new value is emitted 13 const id$ = of(42, 43, 44); 14 store.loadBooking(id$) 15 } 16 } 17 const id = signal(42); store.loadBooking(id) @Component({ /* ... */ }) 1 export class MyComponent { 2 store = inject(BookingStore); 3 4 constructor() { 5 // executed one time 6 store.loadBooking(42) 7 8 // executed each time the signal changes 9 10 11 12 // executed each time a new value is emitted 13 const id$ = of(42, 43, 44); 14 store.loadBooking(id$) 15 } 16 } 17 const id$ = of(42, 43, 44); store.loadBooking(id$) @Component({ /* ... */ }) 1 export class MyComponent { 2 store = inject(BookingStore); 3 4 constructor() { 5 // executed one time 6 store.loadBooking(42) 7 8 // executed each time the signal changes 9 const id = signal(42); 10 store.loadBooking(id) 11 12 // executed each time a new value is emitted 13 14 15 } 16 } 17
25. @Component({ /* ... */ }) export class SearchComponent { search = new FormControl('', { nonNullable: true }); searchChanged = outputFromObservable( this.search.valueChanges.pipe( debounceTime(300), distinctUntilChanged() ), ); } 1 2 3 4 5 6 7 8 9 10 11
26. @Component({ selector: 'app-products', imports: [ProductCategoryComponent, SearchComponent], template: '<app-search (searchChanged)="store.searchValueChanged($event)" />', styleUrl: './products.component.scss', providers: [ProductsStore] }) export class ProductsComponent { store = inject(ProductsStore); constructor() { const query = this.store.searchTerm; this.store.loadByQuery(query); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
27. @Component({ selector: 'app-products', imports: [ProductCategoryComponent, SearchComponent], template: '<app-search (searchChanged)="store.searchValueChanged($event)" />', styleUrl: './products.component.scss', providers: [ProductsStore] }) export class ProductsComponent { store = inject(ProductsStore); constructor() { const query = this.store.searchTerm; this.store.loadByQuery(query); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 (searchChanged)="store.searchValueChanged($event)" />', @Component({ 1 selector: 'app-products', 2 imports: [ProductCategoryComponent, SearchComponent], 3 template: '<app-search 4 5 styleUrl: './products.component.scss', 6 providers: [ProductsStore] 7 }) 8 export class ProductsComponent { 9 store = inject(ProductsStore); 10 11 constructor() { 12 const query = this.store.searchTerm; 13 this.store.loadByQuery(query); 14 } 15 } 16
28. @Component({ selector: 'app-products', imports: [ProductCategoryComponent, SearchComponent], template: '<app-search (searchChanged)="store.searchValueChanged($event)" />', styleUrl: './products.component.scss', providers: [ProductsStore] }) export class ProductsComponent { store = inject(ProductsStore); constructor() { const query = this.store.searchTerm; this.store.loadByQuery(query); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 (searchChanged)="store.searchValueChanged($event)" />', @Component({ 1 selector: 'app-products', 2 imports: [ProductCategoryComponent, SearchComponent], 3 template: '<app-search 4 5 styleUrl: './products.component.scss', 6 providers: [ProductsStore] 7 }) 8 export class ProductsComponent { 9 store = inject(ProductsStore); 10 11 constructor() { 12 const query = this.store.searchTerm; 13 this.store.loadByQuery(query); 14 } 15 } 16 const query = this.store.searchTerm; this.store.loadByQuery(query); @Component({ 1 selector: 'app-products', 2 imports: [ProductCategoryComponent, SearchComponent], 3 template: '<app-search 4 (searchChanged)="store.searchValueChanged($event)" />', 5 styleUrl: './products.component.scss', 6 providers: [ProductsStore] 7 }) 8 export class ProductsComponent { 9 store = inject(ProductsStore); 10 11 constructor() { 12 13 14 } 15 } 16
29. export const ProductsStore = signalStore( withState({ searchTerm: '' }), withComputed(() => ({ products: computed(() => { /* ... */ }), })), withMethods((store) => ({ loadByQuery: rxMethod<...>, searchValueChanged(searchTerm: string) { patchState(store, { searchTerm }); }, }), ), ); 1 2 3 4 5 6 7 8 9 10 11 12 13
30. export const ProductsStore = signalStore( withState({ searchTerm: '' }), withComputed(() => ({ products: computed(() => { /* ... */ }), })), withMethods((store) => ({ loadByQuery: rxMethod<...>, searchValueChanged(searchTerm: string) { patchState(store, { searchTerm }); }, }), ), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 withState({ searchTerm: '' }), searchValueChanged(searchTerm: string) { patchState(store, { searchTerm }); }, export const ProductsStore = signalStore( 1 2 withComputed(() => ({ 3 products: computed(() => { /* ... */ }), 4 })), 5 withMethods((store) => ({ 6 loadByQuery: rxMethod<...>, 7 8 9 10 }), 11 ), 12 ); 13
31. export const ProductsStore = signalStore( withState({ searchTerm: '' }), withComputed(() => ({ products: computed(() => { /* ... */ }), })), withMethods((store) => ({ loadByQuery: rxMethod<...>, searchValueChanged(searchTerm: string) { patchState(store, { searchTerm }); }, }), ), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 withState({ searchTerm: '' }), searchValueChanged(searchTerm: string) { patchState(store, { searchTerm }); }, export const ProductsStore = signalStore( 1 2 withComputed(() => ({ 3 products: computed(() => { /* ... */ }), 4 })), 5 withMethods((store) => ({ 6 loadByQuery: rxMethod<...>, 7 8 9 10 }), 11 ), 12 ); 13 loadByQuery: rxMethod<...>, export const ProductsStore = signalStore( 1 withState({ searchTerm: '' }), 2 withComputed(() => ({ 3 products: computed(() => { /* ... */ }), 4 })), 5 withMethods((store) => ({ 6 7 searchValueChanged(searchTerm: string) { 8 patchState(store, { searchTerm }); 9 }, 10 }), 11 ), 12 ); 13
32. export const ProductsStore = signalStore( withState({ searchTerm: '' }), withComputed(() => ({ products: computed(() => { /* ... */ }), })), withMethods((store) => ({ loadByQuery: rxMethod<...>, searchValueChanged(searchTerm: string) { patchState(store, { searchTerm }); }, }), ), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 withState({ searchTerm: '' }), searchValueChanged(searchTerm: string) { patchState(store, { searchTerm }); }, export const ProductsStore = signalStore( 1 2 withComputed(() => ({ 3 products: computed(() => { /* ... */ }), 4 })), 5 withMethods((store) => ({ 6 loadByQuery: rxMethod<...>, 7 8 9 10 }), 11 ), 12 ); 13 loadByQuery: rxMethod<...>, export const ProductsStore = signalStore( 1 withState({ searchTerm: '' }), 2 withComputed(() => ({ 3 products: computed(() => { /* ... */ }), 4 })), 5 withMethods((store) => ({ 6 7 searchValueChanged(searchTerm: string) { 8 patchState(store, { searchTerm }); 9 }, 10 }), 11 ), 12 ); 13 products: computed(() => { /* ... */ }), export const ProductsStore = signalStore( 1 withState({ searchTerm: '' }), 2 withComputed(() => ({ 3 4 })), 5 withMethods((store) => ({ 6 loadByQuery: rxMethod<...>, 7 searchValueChanged(searchTerm: string) { 8 patchState(store, { searchTerm }); 9 }, 10 }), 11 ), 12 ); 13
33. export const ProductsStore = signalStore( withState({ searchTerm: '' }), withComputed(() => ({ products: computed(() => { /* ... */ }), })), withMethods((store) => ({ loadByQuery: rxMethod<...>, searchValueChanged(searchTerm: string) { patchState(store, { searchTerm }); }, }), ), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 withState({ searchTerm: '' }), searchValueChanged(searchTerm: string) { patchState(store, { searchTerm }); }, export const ProductsStore = signalStore( 1 2 withComputed(() => ({ 3 products: computed(() => { /* ... */ }), 4 })), 5 withMethods((store) => ({ 6 loadByQuery: rxMethod<...>, 7 8 9 10 }), 11 ), 12 ); 13 loadByQuery: rxMethod<...>, export const ProductsStore = signalStore( 1 withState({ searchTerm: '' }), 2 withComputed(() => ({ 3 products: computed(() => { /* ... */ }), 4 })), 5 withMethods((store) => ({ 6 7 searchValueChanged(searchTerm: string) { 8 patchState(store, { searchTerm }); 9 }, 10 }), 11 ), 12 ); 13 products: computed(() => { /* ... */ }), export const ProductsStore = signalStore( 1 withState({ searchTerm: '' }), 2 withComputed(() => ({ 3 4 })), 5 withMethods((store) => ({ 6 loadByQuery: rxMethod<...>, 7 searchValueChanged(searchTerm: string) { 8 patchState(store, { searchTerm }); 9 }, 10 }), 11 ), 12 ); 13 export const ProductsStore = signalStore( withState({ searchTerm: '' }), withComputed(() => ({ products: computed(() => { /* ... */ }), })), withMethods((store) => ({ loadByQuery: rxMethod<...>, searchValueChanged(searchTerm: string) { patchState(store, { searchTerm }); }, }), ), ); 1 2 3 4 5 6 7 8 9 10 11 12 13
34. How Do We Keep Things Clean As Complexity Grows?
35. export function withMyNameFeature() { return signalStoreFeature( withState({ firstName: ‘Fabian’, lastName: ‘Gosebrink’ }), withComputed(({firstName, lastName }) => ({ fullName: computed(() => `${firstName()} ${lastName()}`), })), withMethods(({firstName, lastName }) => ({ logName() { console.log(firstName(), lastName()); } })) ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
36. export function withMyNameFeature() { return signalStoreFeature( withState({ firstName: ‘Fabian’, lastName: ‘Gosebrink’ }), withComputed(({firstName, lastName }) => ({ fullName: computed(() => `${firstName()} ${lastName()}`), })), withMethods(({firstName, lastName }) => ({ logName() { console.log(firstName(), lastName()); } })) ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 withState({ firstName: ‘Fabian’, lastName: ‘Gosebrink’ }), export function withMyNameFeature() { 1 return signalStoreFeature( 2 3 4 5 6 7 withComputed(({firstName, lastName }) => ({ 8 fullName: computed(() => `${firstName()} ${lastName()}`), 9 })), 10 11 withMethods(({firstName, lastName }) => ({ 12 logName() { 13 console.log(firstName(), lastName()); 14 } 15 })) 16 17 ); 18 } 19
37. export function withMyNameFeature() { return signalStoreFeature( withState({ firstName: ‘Fabian’, lastName: ‘Gosebrink’ }), withComputed(({firstName, lastName }) => ({ fullName: computed(() => `${firstName()} ${lastName()}`), })), withMethods(({firstName, lastName }) => ({ logName() { console.log(firstName(), lastName()); } })) ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 withState({ firstName: ‘Fabian’, lastName: ‘Gosebrink’ }), export function withMyNameFeature() { 1 return signalStoreFeature( 2 3 4 5 6 7 withComputed(({firstName, lastName }) => ({ 8 fullName: computed(() => `${firstName()} ${lastName()}`), 9 })), 10 11 withMethods(({firstName, lastName }) => ({ 12 logName() { 13 console.log(firstName(), lastName()); 14 } 15 })) 16 17 ); 18 } 19 withComputed(({firstName, lastName }) => ({ fullName: computed(() => `${firstName()} ${lastName()}`), })), export function withMyNameFeature() { 1 return signalStoreFeature( 2 withState({ 3 firstName: ‘Fabian’, 4 lastName: ‘Gosebrink’ 5 }), 6 7 8 9 10 11 withMethods(({firstName, lastName }) => ({ 12 logName() { 13 console.log(firstName(), lastName()); 14 } 15 })) 16 17 ); 18 } 19
38. export function withMyNameFeature() { return signalStoreFeature( withState({ firstName: ‘Fabian’, lastName: ‘Gosebrink’ }), withComputed(({firstName, lastName }) => ({ fullName: computed(() => `${firstName()} ${lastName()}`), })), withMethods(({firstName, lastName }) => ({ logName() { console.log(firstName(), lastName()); } })) ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 withState({ firstName: ‘Fabian’, lastName: ‘Gosebrink’ }), export function withMyNameFeature() { 1 return signalStoreFeature( 2 3 4 5 6 7 withComputed(({firstName, lastName }) => ({ 8 fullName: computed(() => `${firstName()} ${lastName()}`), 9 })), 10 11 withMethods(({firstName, lastName }) => ({ 12 logName() { 13 console.log(firstName(), lastName()); 14 } 15 })) 16 17 ); 18 } 19 withComputed(({firstName, lastName }) => ({ fullName: computed(() => `${firstName()} ${lastName()}`), })), export function withMyNameFeature() { 1 return signalStoreFeature( 2 withState({ 3 firstName: ‘Fabian’, 4 lastName: ‘Gosebrink’ 5 }), 6 7 8 9 10 11 withMethods(({firstName, lastName }) => ({ 12 logName() { 13 console.log(firstName(), lastName()); 14 } 15 })) 16 17 ); 18 } 19 withMethods(({firstName, lastName }) => ({ logName() { console.log(firstName(), lastName()); } })) export function withMyNameFeature() { 1 return signalStoreFeature( 2 withState({ 3 firstName: ‘Fabian’, 4 lastName: ‘Gosebrink’ 5 }), 6 7 withComputed(({firstName, lastName }) => ({ 8 fullName: computed(() => `${firstName()} ${lastName()}`), 9 })), 10 11 12 13 14 15 16 17 ); 18 } 19
39. export const MyStore = signalStore( withState({ myProp: 99 }), withMyNameFeature(), ); // Usage readonly store = inject(MyStore); store.firstName(); store.lastName(); store.fullName(); store.logName(); store.myProp(); 1 2 3 4 5 6 7 8 9 10 11 12 13
40. export const MyStore = signalStore( withState({ myProp: 99 }), withMyNameFeature(), ); // Usage readonly store = inject(MyStore); store.firstName(); store.lastName(); store.fullName(); store.logName(); store.myProp(); 1 2 3 4 5 6 7 8 9 10 11 12 13 withMyNameFeature(), export const MyStore = signalStore( 1 withState({ myProp: 99 }), 2 3 ); 4 5 // Usage 6 readonly store = inject(MyStore); 7 8 store.firstName(); 9 store.lastName(); 10 store.fullName(); 11 store.logName(); 12 store.myProp(); 13
41. export const MyStore = signalStore( withState({ myProp: 99 }), withMyNameFeature(), ); // Usage readonly store = inject(MyStore); store.firstName(); store.lastName(); store.fullName(); store.logName(); store.myProp(); 1 2 3 4 5 6 7 8 9 10 11 12 13 withMyNameFeature(), export const MyStore = signalStore( 1 withState({ myProp: 99 }), 2 3 ); 4 5 // Usage 6 readonly store = inject(MyStore); 7 8 store.firstName(); 9 store.lastName(); 10 store.fullName(); 11 store.logName(); 12 store.myProp(); 13 store.firstName(); store.lastName(); store.fullName(); store.logName(); export const MyStore = signalStore( 1 withState({ myProp: 99 }), 2 withMyNameFeature(), 3 ); 4 5 // Usage 6 readonly store = inject(MyStore); 7 8 9 10 11 12 store.myProp(); 13
42. export const MyStore = signalStore( withState({ myProp: 99 }), withMyNameFeature(), ); // Usage readonly store = inject(MyStore); store.firstName(); store.lastName(); store.fullName(); store.logName(); store.myProp(); 1 2 3 4 5 6 7 8 9 10 11 12 13 withMyNameFeature(), export const MyStore = signalStore( 1 withState({ myProp: 99 }), 2 3 ); 4 5 // Usage 6 readonly store = inject(MyStore); 7 8 store.firstName(); 9 store.lastName(); 10 store.fullName(); 11 store.logName(); 12 store.myProp(); 13 store.firstName(); store.lastName(); store.fullName(); store.logName(); export const MyStore = signalStore( 1 withState({ myProp: 99 }), 2 withMyNameFeature(), 3 ); 4 5 // Usage 6 readonly store = inject(MyStore); 7 8 9 10 11 12 store.myProp(); 13 withState({ myProp: 99 }), store.myProp(); export const MyStore = signalStore( 1 2 withMyNameFeature(), 3 ); 4 5 // Usage 6 readonly store = inject(MyStore); 7 8 store.firstName(); 9 store.lastName(); 10 store.fullName(); 11 store.logName(); 12 13
43. function withLogger<S extends object>() { return signalStoreFeature( withHooks({ onInit(store) { effect(() => console.log(getState(store))); } }) ); } 1 2 3 4 5 6 7 8 9
44. Entity Management
45. type Booking = { id: string; customerName: string; date: string; }; // Usage export const BookingStore = signalStore( withEntities<Booking>(), // ... ); readonly store = inject(BookingStore); // automatically added store.ids(); store.entityMap(); store.entities(); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
46. type Booking = { id: string; customerName: string; date: string; }; // Usage export const BookingStore = signalStore( withEntities<Booking>(), // ... ); readonly store = inject(BookingStore); // automatically added store.ids(); store.entityMap(); store.entities(); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 withEntities<Booking>(), type Booking = { 1 id: string; 2 customerName: string; 3 date: string; 4 }; 5 6 // Usage 7 export const BookingStore = signalStore( 8 9 // ... 10 ); 11 12 readonly store = inject(BookingStore); 13 14 // automatically added 15 store.ids(); 16 store.entityMap(); 17 store.entities(); 18
47. type Booking = { id: string; customerName: string; date: string; }; // Usage export const BookingStore = signalStore( withEntities<Booking>(), // ... ); readonly store = inject(BookingStore); // automatically added store.ids(); store.entityMap(); store.entities(); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 withEntities<Booking>(), type Booking = { 1 id: string; 2 customerName: string; 3 date: string; 4 }; 5 6 // Usage 7 export const BookingStore = signalStore( 8 9 // ... 10 ); 11 12 readonly store = inject(BookingStore); 13 14 // automatically added 15 store.ids(); 16 store.entityMap(); 17 store.entities(); 18 store.ids(); store.entityMap(); store.entities(); type Booking = { 1 id: string; 2 customerName: string; 3 date: string; 4 }; 5 6 // Usage 7 export const BookingStore = signalStore( 8 withEntities<Booking>(), 9 // ... 10 ); 11 12 readonly store = inject(BookingStore); 13 14 // automatically added 15 16 17 18
48. { 'first-booking-id': { id: 'first-booking-id', customerName: 'John Doe', date: '2025-01-15', }, 'second-booking-id': { id: 'second-booking-id', customerName: 'Jane Smith', date: '2025-02-03', }, } 1 2 3 4 5 6 7 8 9 10 11 12
49. export const BookingStore = signalStore( // ... withEntities<Booking>(), withComputed((store) => ({ bookingCount: computed(() => store.entities().length), })), ); 1 2 3 4 5 6 7 8
50. export const BookingStore = signalStore( withEntities<Booking>(), // ... withMethods((store) => ({ addBookings(bookings: Booking[]) { addEntities(store, bookings); }, updateBooking(booking: Booking) { updateEntity(store, booking); }, removeBooking(id: string) { removeEntity(store, id); }, })), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
51. type Booking = { ... }; type Customer = { ... }; // Usage export const BookingStore = signalStore( withEntities({ entity: type<Booking>(), collection: 'booking' }), withEntities({ entity: type<Customer>(), collection: 'customer' }), // ... ); readonly store = inject(BookingStore); // automatically added store.bookingIds(); store.bookingEntityMap(); store.bookingEntities(); store.customerIds(); store.customerEntityMap(); store.customerEntities(); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
52. type Booking = { ... }; type Customer = { ... }; // Usage export const BookingStore = signalStore( withEntities({ entity: type<Booking>(), collection: 'booking' }), withEntities({ entity: type<Customer>(), collection: 'customer' }), // ... ); readonly store = inject(BookingStore); // automatically added store.bookingIds(); store.bookingEntityMap(); store.bookingEntities(); store.customerIds(); store.customerEntityMap(); store.customerEntities(); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 withEntities({ entity: type<Booking>(), collection: 'booking' }), withEntities({ entity: type<Customer>(), collection: 'customer' }), type Booking = { ... }; 1 type Customer = { ... }; 2 3 4 // Usage 5 export const BookingStore = signalStore( 6 7 8 // ... 9 ); 10 11 readonly store = inject(BookingStore); 12 13 // automatically added 14 store.bookingIds(); 15 store.bookingEntityMap(); 16 store.bookingEntities(); 17 18 store.customerIds(); 19 store.customerEntityMap(); 20 store.customerEntities(); 21
53. type Booking = { ... }; type Customer = { ... }; // Usage export const BookingStore = signalStore( withEntities({ entity: type<Booking>(), collection: 'booking' }), withEntities({ entity: type<Customer>(), collection: 'customer' }), // ... ); readonly store = inject(BookingStore); // automatically added store.bookingIds(); store.bookingEntityMap(); store.bookingEntities(); store.customerIds(); store.customerEntityMap(); store.customerEntities(); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 withEntities({ entity: type<Booking>(), collection: 'booking' }), withEntities({ entity: type<Customer>(), collection: 'customer' }), type Booking = { ... }; 1 type Customer = { ... }; 2 3 4 // Usage 5 export const BookingStore = signalStore( 6 7 8 // ... 9 ); 10 11 readonly store = inject(BookingStore); 12 13 // automatically added 14 store.bookingIds(); 15 store.bookingEntityMap(); 16 store.bookingEntities(); 17 18 store.customerIds(); 19 store.customerEntityMap(); 20 store.customerEntities(); 21 store.bookingIds(); store.bookingEntityMap(); store.bookingEntities(); store.customerIds(); store.customerEntityMap(); store.customerEntities(); type Booking = { ... }; 1 type Customer = { ... }; 2 3 4 // Usage 5 export const BookingStore = signalStore( 6 withEntities({ entity: type<Booking>(), collection: 'booking' }), 7 withEntities({ entity: type<Customer>(), collection: 'customer' }), 8 // ... 9 ); 10 11 readonly store = inject(BookingStore); 12 13 // automatically added 14 15 16 17 18 19 20 21
54. type Booking = { ... }; type Customer = { ... }; // Usage export const BookingStore = signalStore( withEntities({ entity: type<Booking>(), collection: 'booking' }), withEntities({ entity: type<Customer>(), collection: 'customer' }), // ... ); readonly store = inject(BookingStore); // automatically added store.bookingIds(); store.bookingEntityMap(); store.bookingEntities(); store.customerIds(); store.customerEntityMap(); store.customerEntities(); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 withEntities({ entity: type<Booking>(), collection: 'booking' }), withEntities({ entity: type<Customer>(), collection: 'customer' }), type Booking = { ... }; 1 type Customer = { ... }; 2 3 4 // Usage 5 export const BookingStore = signalStore( 6 7 8 // ... 9 ); 10 11 readonly store = inject(BookingStore); 12 13 // automatically added 14 store.bookingIds(); 15 store.bookingEntityMap(); 16 store.bookingEntities(); 17 18 store.customerIds(); 19 store.customerEntityMap(); 20 store.customerEntities(); 21 store.bookingIds(); store.bookingEntityMap(); store.bookingEntities(); store.customerIds(); store.customerEntityMap(); store.customerEntities(); type Booking = { ... }; 1 type Customer = { ... }; 2 3 4 // Usage 5 export const BookingStore = signalStore( 6 withEntities({ entity: type<Booking>(), collection: 'booking' }), 7 withEntities({ entity: type<Customer>(), collection: 'customer' }), 8 // ... 9 ); 10 11 readonly store = inject(BookingStore); 12 13 // automatically added 14 15 16 17 18 19 20 21 type Booking = { ... }; type Customer = { ... }; // Usage export const BookingStore = signalStore( withEntities({ entity: type<Booking>(), collection: 'booking' }), withEntities({ entity: type<Customer>(), collection: 'customer' }), // ... ); readonly store = inject(BookingStore); // automatically added store.bookingIds(); store.bookingEntityMap(); store.bookingEntities(); store.customerIds(); store.customerEntityMap(); store.customerEntities(); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
55. Events Plugin
56. export const bookingApiEvents = eventGroup({ source: 'Bookings API', events: { bookingsLoaded: type<void>(), bookingsLoadedSuccess: type<Booking[]>(), }, }); export const bookingUserEvents = eventGroup({ source: 'Bookings User', events: { pageOpened: type<void>(), }, }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14
57. export const BookingStore = signalStore( // .. withEventHandlers((store, events = inject(Events), bookingService = inject(BookingService)) => ({ loadBookings$: events .on(bookingUserEvents.pageOpened) .pipe( exhaustMap(() => bookingService.loadBookings().pipe( mapResponse({ next: (bookings) => bookingApiEvents.bookingsLoadedSuccess(bookings), error: console.error, }), ), ), ), }), ), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
58. export const BookingStore = signalStore( // .. withEventHandlers((store, events = inject(Events), bookingService = inject(BookingService)) => ({ loadBookings$: events .on(bookingUserEvents.pageOpened) .pipe( exhaustMap(() => bookingService.loadBookings().pipe( mapResponse({ next: (bookings) => bookingApiEvents.bookingsLoadedSuccess(bookings), error: console.error, }), ), ), ), }), ), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 withEventHandlers((store, events = inject(Events), export const BookingStore = signalStore( 1 // .. 2 3 bookingService = inject(BookingService)) => ({ 4 loadBookings$: events 5 .on(bookingUserEvents.pageOpened) 6 .pipe( 7 exhaustMap(() => 8 bookingService.loadBookings().pipe( 9 mapResponse({ 10 next: (bookings) => 11 bookingApiEvents.bookingsLoadedSuccess(bookings), 12 error: console.error, 13 }), 14 ), 15 ), 16 ), 17 }), 18 ), 19 ); 20
59. export const BookingStore = signalStore( // .. withEventHandlers((store, events = inject(Events), bookingService = inject(BookingService)) => ({ loadBookings$: events .on(bookingUserEvents.pageOpened) .pipe( exhaustMap(() => bookingService.loadBookings().pipe( mapResponse({ next: (bookings) => bookingApiEvents.bookingsLoadedSuccess(bookings), error: console.error, }), ), ), ), }), ), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 withEventHandlers((store, events = inject(Events), export const BookingStore = signalStore( 1 // .. 2 3 bookingService = inject(BookingService)) => ({ 4 loadBookings$: events 5 .on(bookingUserEvents.pageOpened) 6 .pipe( 7 exhaustMap(() => 8 bookingService.loadBookings().pipe( 9 mapResponse({ 10 next: (bookings) => 11 bookingApiEvents.bookingsLoadedSuccess(bookings), 12 error: console.error, 13 }), 14 ), 15 ), 16 ), 17 }), 18 ), 19 ); 20 loadBookings$: events .on(bookingUserEvents.pageOpened) export const BookingStore = signalStore( 1 // .. 2 withEventHandlers((store, events = inject(Events), 3 bookingService = inject(BookingService)) => ({ 4 5 6 .pipe( 7 exhaustMap(() => 8 bookingService.loadBookings().pipe( 9 mapResponse({ 10 next: (bookings) => 11 bookingApiEvents.bookingsLoadedSuccess(bookings), 12 error: console.error, 13 }), 14 ), 15 ), 16 ), 17 }), 18 ), 19 ); 20
60. export const BookingStore = signalStore( // .. withEventHandlers((store, events = inject(Events), bookingService = inject(BookingService)) => ({ loadBookings$: events .on(bookingUserEvents.pageOpened) .pipe( exhaustMap(() => bookingService.loadBookings().pipe( mapResponse({ next: (bookings) => bookingApiEvents.bookingsLoadedSuccess(bookings), error: console.error, }), ), ), ), }), ), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 withEventHandlers((store, events = inject(Events), export const BookingStore = signalStore( 1 // .. 2 3 bookingService = inject(BookingService)) => ({ 4 loadBookings$: events 5 .on(bookingUserEvents.pageOpened) 6 .pipe( 7 exhaustMap(() => 8 bookingService.loadBookings().pipe( 9 mapResponse({ 10 next: (bookings) => 11 bookingApiEvents.bookingsLoadedSuccess(bookings), 12 error: console.error, 13 }), 14 ), 15 ), 16 ), 17 }), 18 ), 19 ); 20 loadBookings$: events .on(bookingUserEvents.pageOpened) export const BookingStore = signalStore( 1 // .. 2 withEventHandlers((store, events = inject(Events), 3 bookingService = inject(BookingService)) => ({ 4 5 6 .pipe( 7 exhaustMap(() => 8 bookingService.loadBookings().pipe( 9 mapResponse({ 10 next: (bookings) => 11 bookingApiEvents.bookingsLoadedSuccess(bookings), 12 error: console.error, 13 }), 14 ), 15 ), 16 ), 17 }), 18 ), 19 ); 20 bookingService.loadBookings().pipe( mapResponse({ next: (bookings) => bookingApiEvents.bookingsLoadedSuccess(bookings), error: console.error, }), ), export const BookingStore = signalStore( 1 // .. 2 withEventHandlers((store, events = inject(Events), 3 bookingService = inject(BookingService)) => ({ 4 loadBookings$: events 5 .on(bookingUserEvents.pageOpened) 6 .pipe( 7 exhaustMap(() => 8 9 10 11 12 13 14 15 ), 16 ), 17 }), 18 ), 19 ); 20
61. export const bookingApiEvents = eventGroup({ ... }); export const bookingUserEvents = eventGroup({ ... }); export const BookingStore = signalStore( withState<BookingState>(initialBookingState), withReducer( on(bookingApiEvents.bookingsLoadedSuccess, ({ payload }) => ({ bookings: payload })), ), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
62. export const bookingApiEvents = eventGroup({ ... }); export const bookingUserEvents = eventGroup({ ... }); export const BookingStore = signalStore( withState<BookingState>(initialBookingState), withReducer( on(bookingApiEvents.bookingsLoadedSuccess, ({ payload }) => ({ bookings: payload })), ), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 withReducer( on(bookingApiEvents.bookingsLoadedSuccess, ({ payload }) => ({ bookings: payload })), ), export const bookingApiEvents = eventGroup({ 1 ... 2 }); 3 4 export const bookingUserEvents = eventGroup({ 5 ... 6 }); 7 8 export const BookingStore = signalStore( 9 withState<BookingState>(initialBookingState), 10 11 12 13 14 15 ); 16
63. @Component({ /* ... */ }) export class BookingsComponent { readonly dispatcher = inject(Dispatcher); constructor() { this.dispatcher.dispatch(bookingUserEvents.pageOpened()); } } @Component({ /* ... */ }) export class BookingsComponent { readonly dispatch = injectDispatch(bookingUserEvents); constructor() { dispatch.pageOpened() } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
64. @Component({ /* ... */ }) export class BookingsComponent { readonly dispatcher = inject(Dispatcher); constructor() { this.dispatcher.dispatch(bookingUserEvents.pageOpened()); } } @Component({ /* ... */ }) export class BookingsComponent { readonly dispatch = injectDispatch(bookingUserEvents); constructor() { dispatch.pageOpened() } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 export class BookingsComponent { readonly dispatcher = inject(Dispatcher); constructor() { this.dispatcher.dispatch(bookingUserEvents.pageOpened()); } } @Component({ /* ... */ }) 1 2 3 4 5 6 7 8 9 10 @Component({ /* ... */ }) 11 export class BookingsComponent { 12 readonly dispatch = injectDispatch(bookingUserEvents); 13 14 constructor() { 15 dispatch.pageOpened() 16 } 17 } 18
65. @Component({ /* ... */ }) export class BookingsComponent { readonly dispatcher = inject(Dispatcher); constructor() { this.dispatcher.dispatch(bookingUserEvents.pageOpened()); } } @Component({ /* ... */ }) export class BookingsComponent { readonly dispatch = injectDispatch(bookingUserEvents); constructor() { dispatch.pageOpened() } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 export class BookingsComponent { readonly dispatcher = inject(Dispatcher); constructor() { this.dispatcher.dispatch(bookingUserEvents.pageOpened()); } } @Component({ /* ... */ }) 1 2 3 4 5 6 7 8 9 10 @Component({ /* ... */ }) 11 export class BookingsComponent { 12 readonly dispatch = injectDispatch(bookingUserEvents); 13 14 constructor() { 15 dispatch.pageOpened() 16 } 17 } 18 export class BookingsComponent { readonly dispatch = injectDispatch(bookingUserEvents); constructor() { dispatch.pageOpened() } } @Component({ /* ... */ }) 1 export class BookingsComponent { 2 readonly dispatcher = inject(Dispatcher); 3 4 constructor() { 5 this.dispatcher.dispatch(bookingUserEvents.pageOpened()); 6 } 7 } 8 9 10 @Component({ /* ... */ }) 11 12 13 14 15 16 17 18
67. Signal Store gives complexity a place to live
69. Ship with Confidence
70. Thank you
71. fabiangosebrink.bsky.social Fabian Gosebrink GDE for Angular, Microsoft MVP, Nx Champion, Pluralsight Author