Angular and NgRX 17 – Redux with Signals
Main Speaker:
Kobi Hari
Tracks:
CodeSeminar Categories:
CodeFrontend
Fullstack
Course ID:
50909Date:
23/06/2024Time:
Daily seminar9:00-16:30
Location:
Daniel Hotel, HerzliyaOverview
Angular loves reactive and functional programming. The learning curve of RxJS, though, is steep so new developers tend to struggle to adopt it. Those who do, never look back. It is by far the most elegant and well-structured way to develop web applications.
Redux takes reactivity a step further while focusing on state management. It allows you to store and manage your application data while exposing it to the components as observable data streams while keeping data changes predictable and traceable. It also provides advanced debugging tools including time travel. NgRx-Effects, integrate redux with reactivity even further, to the extrene.
With the introduction of *Signals* in V.16 – Angular offered a simplified way to create reactive code and this feature quickly becomes the focus of future versions. NgRx 17 introduced an amazing new tool called *Signal Store* which looks more and more like the missing piece of the puzzle. The new *signal store* is fully signal based, lightweight, and highly extensible.
In this session we will do a quick recap of Redux using “ngrx/store” and “ngrx/store-devtools”. We will dive deep into effects and see the amazing power that they have when using RxJs “higher order operators”. We will also discover the new signal store, see how easy it is to use it either as a global store or at component level, and see how to extend it using *Custom Features*
Who Should Attend
- Angular programmers, team leaders, technology officers who would like to be introduced to redux and learn the best paradigm for complex angular applications.
- Developers familiar with NgRx and would like to use it in the modern angular paradigms.
Prerequisites
- Some familiarity and experience in Angular
- RxJS and NgRx – Recommendedbut optional
Course Contents
Redux using NgRx
- Some quick theory about Redux, Functional programming and Reactivity
- The NgRx store: State, Store, Actions, Selectors and Reducers
- Advanced – Action Groups and Features
Effects in NgRx store
- What is an NgRx effect
- Simplifing effects using “functional effects” in NgRx 16+
Working with Signals in Angular and NgRX
- Deep dive into signals in Angular
- Using NgRx/Signals – The signal state and deep signal
- Introduction to Signal Stores
- Working with state, computed, methods and hooks
- Adding custom features to signal store.