The document presents a comparison of various state management solutions for Angular, including NgRx, NGXS, and Akita, highlighting their features, complexity, and tools. It discusses the roles of actions, reducers, and services in managing state within an application. Additionally, the document contains a demo and contact information for the presenter, Denys Lymarenko.

1. 1
One more State management in Angular
(NGRX vs. NGXS vs. Akita vs RXJS)
Presenter Denys Lymarenko
Software Engineer, Angular trainer
December 2019

2. 2

3. 3

4. 4
App Component
Component 1
Component 2 Component 3
Component 4
Component 5 Component 6

5. 5
App Component
Component 1
Component 2 Component 3
Component 4
Component 5 Component 6
Service

6. 6
Actions
Current State
New State
Reducer
Store
Component

7. 7
JavaScript framework lifecycle

8. 8

9. 9

10. 10
ActionsActions
Store
Reducer
ActionAction Effects
Component Service
Selector

11. 11
Components Actions
Store
Plugins
Backend
Select
Dispatch
Mutate

12. 12
Backend API
Service
Store
Query Query
Query
Query
Updates Streaming Data
Component
Actions (methods) Rendering
Interacting with other queries

13. 13
Tooling Redux Devtools Schematics
+ +
+ +
+ +
Services - -

14. 14
Tooling Logo
7
5
10
Services 0

15. 15
Boilerplate code Complexity
Heavy Low
Low Low
Low Low
Services Medium Medium

16. 16
Features NGRX NGXS AKITA Services
Forms sync 3rd party lib Core Core -
Transactions - - + -
Router sync Core Core - -
Entity adapter + labs + -
Memorized
Selectors
+ + + -

17. 17

18. 18

19. 19
Component
Facade
Effects
Store State Sectors Actions Reducers

20. 20
Demo

21. 21
Thank you!
Denys Lymarenko
Github: LimarenkoDenis
Instagram: instalimar
denys.lymarenko@globallogic.com