This document discusses using Angular with a functional programming style and the ngrx/store library for state management. It explains how ngrx/store implements a single immutable state store with actions and reducers. Components dispatch actions that are handled by reducers to update the state. State changes are observable throughout the app. Effects isolate side effects like HTTP calls from components. The ngrx/dev-tools enable time travel debugging of state changes.

1. Angular
functional style
Vasyl Sydorivskyi – Innovecs

2. Why functional?
• Easy to test
• Easy to maintain
• Pure functions

3. Simple app
• @input and @output
decorators to pass
information between
parent and child
components
App
component
Component 1

4. Complex app
• A lot of inputs and outputs
• State sharing services
App
component
Component 1 Component 2
Component 3 Component 4 Component 5 Component 6

5. State management
• Single store
• Read-only state
• Pure function reducers

6. @ngrx/store
REDUCER
COMPONENTS
Actions
State

7. Action
interface Action {
type: string;
payload?: any;
}

8. Reducer
interface Reducer<State> {
(state: State, action: Action): State;
}

9. Store
class Store<T> extends Observable<T> {
select((state: T) => R): Observable<R>
dispatch(action: Action): void;
}

10. Recap
• Actions represent any event in application
• Reducers "reduce" actions into new state
• State could be shared with any component

11. @ngrx/effects
• Any interaction with outside world
• HTTP requests, websockets, etc.
• Components are free from side-effects

12. REDUCER
COMPONENTS
Actions
State
Side-effects
Actions

13. Actions
• Actions is an observable of all actions
• ofType is an operator that filters specific actions
• Can produce new actions in response
class Actions extends Observable<Action> {
ofType(...keys: string[]): Actions;
}

14. @ngrx/dev-tools
• Enables Redux Devtools
Extension
• Time traveling

15. Wrapping up
• Application state is observable and immutable
• It has shared state service
• Side effects are isolated from components

16. DEMO

18. Thank you!

19. Useful links
• https://gist.github.com/btroncone/
a6e4347326749f938510#introduction
• https://www.youtube.com/watch?
v=cyaAhXHhxgk