5. Predictable Reactive State Management

Transcript

2. Today's Schedule 1. Why Redux? 2. NGRX
3. Things we have to manage in out apps • Data that comes from the server and whether it's pending or resulted in an error • UI state like toggles, alerts and errors messages • User input, filters and search queries • Other
4. Component - Service
5. But our apps grow
6. Components - Service
7. What changed?
8. Flux • Flux is an architecture for creating data layers in JavaScript applications. • It places a focus on creating explicit and understandable update paths for your application's data • Helps tracing changes during development and makes bugs easier to track down and fix
9. Flux
10. Redux • Predictable state management • Architecture that keeps the core principles of Flux by having unidirectional data flow • Redux applications have only one global, read-only application state • This state is calculated by "reducing" over a collection or stream of actions that update it in controlled ways
11. Redux Constraints • Single State Tree • Actions describe updates • Reducer apply updates
12. Redux Contracts • Reducers - Specification of how the state updates • High Order Reducers - Functions that take reducer as argument, take some additional arguments and return another reducer. • Selectors - Takes the whole states and returns a derived state
13. Redux in Angular Single responsibility?
14. Redux in Angular
15. @ngrx
16. @ngrx/store • Implementation of Redux for NG • It uses RxJS Observables
17. @ngrx/effects • Side effect model for @ngrx/store
18. @ngrx/router-store • Bindings to connect angular/router to ngrx/store
19. @ngrx/store & @ngrx/effects
20. Pros and cons using ngrx 1. Unidirectional data flow 2. Really helpful dev-tools (time travel) 3. Good code separation 4. Fast bug fixing due to 1, 2 and 3 5. Easier testing and reasoning due to pure functions and composition 6. Better angular performance with OnPush Strategy 7. More files and code
21. https://github.com/ngrx/store
22. Example
23. Install packages
24. Install devtools
25. Define store actions app/store/app.actions.ts
26. Define state structure app/store/app.reducer.ts
27. Define state changes app/store/app.reducer.ts
28. Create the reducer function app/store/app.reducer.ts
29. Import store and devtools app/store/app.module.ts
30. Create the app model app/store/app.module.ts
31. Use the app model app/todo-list/todo-list.component.ts
32. Use the app model app/todo-list/todo-list.component.html
33. The reducer factory app/store/reducer-factory.ts
34. Demo
35. Resources http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/ https://gist.github.com/btroncone/a6e4347326749f938510