Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular - SignalStore

Angular - SignalStore

Entdecke die Zukunft des State Management mit NgRx Signal Store: Ein vollständig signal-basierter Ansatz, der Leichtigkeit mit Flexibilität verbindet. Diese Session bietet einen Einblick in die innovative Architektur des NgRx Signal Stores, der sich durch seine Anpassungsfähigkeit an unterschiedliche Architekturstile und Entwicklungsanforderungen auszeichnet. Erlebe anhand einer interaktiven Demo-Anwendung, wie der SignalStore nicht nur entwickelt, sondern auch erweitert werden kann, um zentrale Anforderungen effizient und konsistent zu erfüllen.
Interesse geweckt? Dann komm vorbei und sei dabei :-)

Patrick Jahr

April 26, 2024
Tweet

More Decks by Patrick Jahr

Other Decks in Programming

Transcript

  1. Patrick Jahr • qupaya, 26.04.2024 What to expect? - Small

    comparison of the stores - Introduction of the signal store What not to expect? - Testing
  2. Patrick Jahr • qupaya, 26.04.2024 Table of contents 1. NgRx

    Store 2. ComponentStore 3. NgRx Signals 4. SignalStore
  3. Patrick Jahr • qupaya, 26.04.2024 Ngrx Store Actions, Reducers and

    Effects Characteristics: • Type Safety • Immutability & Performance • Encapsulation • DevTools When do i use Ngrx Store? → SHARI • Shared • Hydrated • Available • Retrieved • Impacted
  4. Patrick Jahr • qupaya, 26.04.2024 Component Store State, Selectors, Effects

    and Updaters Characteristics: • Tied to the life-cycle of a particular component and is cleaned up when that component is destroyed • Instead of reducer, available functions ◦ setState ◦ updater • Effects defined as methods with or without parameters • Performant selectors
  5. Patrick Jahr • qupaya, 26.04.2024 Comparison of Store and ComponentStore

    Store: • Ability to trigger multiple effects/reducers • Useful DevTools • Better suited for global state handling • Single State • File Structure separated ◦ Effects ◦ Reducers ◦ Selectors ComponentStore: • Manage local state ◦ Component UI State • Multiple independent states • Single file structure ◦ effects/updaters/selectors Both: • Pushed based architecture • Work with Observables • Both has effects to handle side effects
  6. Patrick Jahr • qupaya, 26.04.2024 NgRx Signals @ngrx/signals Features: •

    SignalStore: State-Management based on Angular Signals • SignalState: Signal based State for UI-Components and Services • RxJS-Integration: New possibility to handle side effects with the integration of RxJS. • Entity Management: Easy and performant way to handle Entity Data Collections
  7. Patrick Jahr • qupaya, 26.04.2024 Signal Store Function based state,

    methods, hooks and more Characteristics: • Simple and Intuitive: Efficient API for Angular Signals. • Lightweight and Performant: Minimal overhead, optimal size. • Modular, Extensible, Scalable: Independent building blocks. • Type-safe: Compile-time error prevention.