Brand new Michael Egger-Zikes Redux State Management ANGULARarchitects.io 

Ng Signals NgRx Store Angular State Management NgRx Signal State NgRx Signal Store Michael Egger-Zikes (@MikeZks) 

• Michael Egger-Zikes ANGULARarchitects.io • Focus on Angular • Trainings, Consultancy, Reviews • Conference Speaker Public: in-person or remote In-House: everywhere angulararchitects.io /en/angular-workshops Michael Egger-Zikes @MikeZks About Michael 

Which State Management approach do I need? Angular Signals? NgRx Store? NgRx Signal State? NgRx Signal Store? ? 

Angular Signals State Management • Reactive Primitive of the Angular Framework • Simple State: string, number, boolean • Flat Objects • Derived State with computed() • Framework Integration: • input(), output(), model(), viewChildren(), contentChildren() • Reactive Context • For Rendering in the Component Template • For Side-Effects with effect() Michael Egger-Zikes (@MikeZks) 

Global State Management – NgRx Store • SHARI Principle • Shared: used by several Components & Services • Hydrated: persist State to Storage • Available: make State available across Router Navigation • Retrieved: involve Side-Effects to make State available • Impacted: State is changed as Actions form several Sources are dispatched • Many Reasons to use Global State Management Michael Egger-Zikes (@MikeZks) 

Component View – NgRx Signal State • Manage nested State on a Local Level w/ a lightweight API • protected localState = signalState({ filter: { … }, basket: { … }, flights: [] }); • Update State • patchState(this.localState, { filter }); • Connect Reactive Logic • const connectFlights = rxMethod(pipe(tap( flights => patchState(this.localState, { flights })) )) conntectFlights(this.store.flights /* Signal */); Michael Egger-Zikes (@MikeZks) 

Lightweight State - NgRx Signal Store • Signal Store Setup • export const CustomLocalStore = signalStore( withState(initialLocalState), withComputed(), withMethods() ); • providers: [CustomLocalStore] • localStore = inject(CustomLocalStore) Michael Egger-Zikes (@MikeZks) 

What are the use cases for a Signal Store? ? 

Signal Store Usage • Local UI State • For one Component only • Destroyed with Component • Component needs to manage complex state • Global State • Root-level Provider • App Lifetime • Can be used as lean alternative for the full Redux pattern Michael Egger-Zikes (@MikeZks) 

Signal Store Usage • Independent State • Component Provider • For a group of Features/Smart Components • Shared State • Component Provider • For a group of common Components/UI Components Michael Egger-Zikes (@MikeZks) 

How does the Signal Store API look like? ? 

API – Redux light • Updater → withMethods() • Similar to Actions & Reducer • Selectors → withComputed() • Custom Signals • Composition • Effects → withMethods() + rxMethod() • (Async) Side-Effects • T | Signal | Observable • Connect View Processing • Connect Global State Management • Trigger State Update Michael Egger-Zikes (@MikeZks) 

API – withMethod / rxMethod • Signal & Observable API (withMethod & rxMethod) • Pass in a Signal or a Stream • Automatic Subscription Management • addUser(userSignal) • triggerUserUpdate(userObservable$) • Non-Reactive API • Pass in Array, Object, string, number, … • Callable from Template • addUser({ id: 1, firstname: Sarah, lastname: Doe }) • triggerUserUpdate(user) Michael Egger-Zikes (@MikeZks) 

Why shall I use State Management and the Signal Store? ? 

Complexity & Reactivity • Opinionated • Clear APIs, Clear Patterns • Similar to Redux, but more lightweight • Reduce overall complexity of Components • Smart Component focuses on the view rendering & user interaction • Local State Management processes the logical parts • Reactive, immutable State Management • Enhances Performance • Signal-based Angular Change Detection • Allows better manageable Signal creation • Important for future browser updates Michael Egger-Zikes (@MikeZks) 

NgRx Team made all of this possible, thx! Michael Egger-Zikes (@MikeZks) 

What comes next? Tell me more! ! 

Signal Store Community Extensions • @angular-architects/ngrx-toolkit • Signal Store Features • withDevtools() • withRedux() • withDataService() • withCallState() • withUndoRedo() • Signal Store Connector • createReduxState() • … and much more Features coming soon. Michael Egger-Zikes (@MikeZks) 

Redux Connector for Signal Store • @angular-architects/ngrx-toolkit → createReduxState() • Turn the Signal Store into a full Redux solution • Community supported • Auto-generated Provider Function • Auto-generated Inject Function for Store access • Action to Method Mapper • Selector Signals • Global Action Dispatch Function • reduxMethod to connect Actions to rxMethod • Use all NgRx and Community Signal Store Features w/ NgRx Store Actions Michael Egger-Zikes (@MikeZks) 

createReduxState export const { provideTicketStore, injectTicketStore } = createReduxState('ticket', TicketStore, store => withActionMappers( mapAction( ticketActions.flightsLoad, // Triggering Action store.loadFlights, // Store Method to call ticketActions.flightsLoaded // Resulting Action ), mapAction(ticketActions.flightUpdate, store.updateFlight) ) ); Michael Egger-Zikes (@MikeZks) 

[web] ANGULARarchitects.io [twitter] Michael Egger-Zikes (@MikeZks) [repo] https://github.com/mikezks/ijs-san-diego-redux-state-mgmt Contact • Slides • Code Remote Workshops: Public & tailored to your company angulararchitects.io/angular-workshops