Brand new Redux State Management - iJS San Diego 05/2024

ANGULARarchitects.io - Michael Egger-Zikes

The NgRx team introduced a fabulous new state management library – the Signal Store. Developers can use modern, lean and functional approaches to define their frontend state and handle reactive side-effects.

Moreover, custom features can be implemented to avoid repetitive code. This generic, reusable API will be a driver for a lot of useful community extensions. We can manage entity state easily, create reusable code to connect to our backend APIs and provide in-memory caches.

This talk will introduce a custom creator that allows to use the Redux pattern with the Signal Store while using the full power of generic community features.

Transcript

1. Brand new Michael Egger-Zikes Redux State Management ANGULARarchitects.io
2. Ng Signals NgRx Store Angular State Management NgRx Signal State NgRx Signal Store Michael Egger-Zikes (@MikeZks)
3. • 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
4. Which State Management approach do I need? Angular Signals? NgRx Store? NgRx Signal State? NgRx Signal Store? ?
5. 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)
6. 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)
7. 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<Flight[]>(pipe(tap( flights => patchState(this.localState, { flights })) )) conntectFlights(this.store.flights /* Signal */); Michael Egger-Zikes (@MikeZks)
8. Lightweight State - NgRx Signal Store • Signal Store Setup • export const CustomLocalStore = signalStore( withState<LocalState>(initialLocalState), withComputed(), withMethods() ); • providers: [CustomLocalStore] • localStore = inject(CustomLocalStore) Michael Egger-Zikes (@MikeZks)
9. What are the use cases for a Signal Store? ?
10. 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)
11. 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)
12. How does the Signal Store API look like? ?
13. API – Redux light • Updater → withMethods() • Similar to Actions & Reducer • Selectors → withComputed() • Custom Signals • Composition • Effects → withMethods() + rxMethod() • (Async) Side-Effects • T | Signal<T> | Observable<T> • Connect View Processing • Connect Global State Management • Trigger State Update Michael Egger-Zikes (@MikeZks)
14. 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)
15. Why shall I use State Management and the Signal Store? ?
16. 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)
17. NgRx Team made all of this possible, thx! Michael Egger-Zikes (@MikeZks)
18. What comes next? Tell me more! !
19. 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)
20. 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)
21. 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)
22. [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