State management with ngRX
Download as PPTX, PDF1 like901 views
The document discusses state management in Angular applications using NgRx, highlighting its importance in large applications. It details the core principles of NgRx, including centralized state, state changes through actions and reducers, and the benefits of using patterns for testability and improved tooling. Additionally, it emphasizes the role of libraries like Redux in facilitating predictable state management.
![@simona_cotin
Single State Tree{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Consider using Redux',
completed: true,
},
{
text: 'Keep all state in a single tree',
completed: false
}
]
}](https://image.slidesharecdn.com/ngatlngrx-180206114500/85/State-management-with-ngRX-34-320.jpg)
![@simona_cotin
const reducer = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
default:
return state;
}
};
Reducer
s](https://image.slidesharecdn.com/ngatlngrx-180206114500/85/State-management-with-ngRX-36-320.jpg)
State management with ngRX
- 3. @simona_cotin Simona Cotin Cloud Dev Advocate @ Microsoft @simona_cotin
- 8. @simona_cotin ✓ Recognise ✓ Make decisions faster ✓ Comfort
- 10. @simona_cotin A day in the life of a component ✓Initialize state ✓Request data from the server ✓Update state to reflect server data ✓React to events that change the state ✓Update state to reflect user interaction ✓Receive state updates from other components 😱 ✓…
- 11. @simona_cotin And this is fine!
- 12. @simona_cotin When you work in a small team
- 13. @simona_cotin And have a small number of components that are not communicating heavily
- 14. @simona_cotin But..what happens when you’re building a large application?
- 15. @simona_cotin
- 16. @simona_cotin
- 17. @simona_cotin Component ✓Render itself ✓Initialize state ✓Request data from the server ✓Update state to reflect server data ✓React to events that change the state ✓Update state to reflect user interaction ✓Receive state updates from other components 😱 ✓…
- 20. @simona_cotin How things work? Component How things look? Input Output
- 22. @simona_cotin
- 25. @simona_cotin
- 26. We call that the store
- 27. How to get state from the store?
- 28. Component How to get state from the store? store.select('counter')
- 29. How to change state?
- 31. @simona_cotinPhoto by Sam Burriss on Unsplash
- 32. @simona_cotin– https://redux.js.org “Redux is a predictable state container for JavaScript apps.”
- 33. @simona_cotin Redux Single source of truth Read-only state Pure functions
- 34. @simona_cotin Single State Tree{ visibilityFilter: 'SHOW_ALL', todos: [ { text: 'Consider using Redux', completed: true, }, { text: 'Keep all state in a single tree', completed: false } ] }
- 35. @simona_cotin Actions const action = { type: 'ADD_TODO', payload: 'learn ngRx' }
- 36. @simona_cotin const reducer = (state = [], action) => { switch (action.type) { case 'ADD_TODO': return [...state, action.payload]; default: return state; } }; Reducer s
- 37. @simona_cotin WIIFM (What’s In It For Me?) ✓ Patterns 🤩❤️😎 ✓ Centralised state ✓ Testability ✓ Tooling and ecosystem
- 40. @simona_cotin A collection of libraries that help with state management in angular
- 41. @simona_cotin
- 42. @simona_cotin WIIFM? 🤩🤩 ✓ Patterns 🤩❤️😎 ✓ Single source of truth/centralised state ✓ Testability ✓ Tooling
- 43. @simona_cotin
- 45. @simona_cotin Common use cases ✓ Trading apps ✓ Network data monitoring ✓ Wizard like apps
- 46. @simona_cotin This is also OK 🤩
- 47. @simona_cotin –Victor Savkin “Careful thinking cannot be replaced by a library.”
- 49. @simona_cotin Happy thoughts • Simpler state management • Testability • Tooling • 😍 Time travel debugging
Editor's Notes
- #4: Who am I?
- #7: Developers like to put everything in a box, neatly arranged and with a clear purpose
- #8: Moreover, we want everything to be a pattern
- #10: Patterns allow us to recognise things we’ve seen before, enable us to make decisions faster and give us a sense of comfort, I got this!
- #11: And with state management we first handled everything in our component
- #17: Getting crowded
- #18: Maintaining this type of system and not being very deliberate about your state management strategy will kinda come back and bite you in the arse.
- #20: Our smart component is concerned of how things work; don’t really have Dom markup, maybe just some wrapping divs. It’s responsible for providing data and behaviour to our presentational component Our presentational components are concerned with how things look
- #21: Our smart component is concerned of how things work; don’t really have Dom markup, maybe just some wrapping divs. It’s responsible for providing data and behaviour to our presentational component Our presentational components are concerned with how things look
- #22: Our smart component is concerned of how things work; don’t really have Dom markup, maybe just some wrapping divs. It’s responsible for providing data and behaviour to our presentational component Our presentational components are concerned with how things look
- #23: And this is great, it helps us isolate state only to certain components And we get patterns. Yay But the state is still spread across multiple components And we still haven’t solved the problem of component communication
- #24: Diagram - highlight where the state is, point at different parts that have state, sidebar Let’s look at this component, where do we find state?
- #28: Smart vs dumb components Shared data between services - loose control, hard to debug All in one place
- #34: Neatly formalised
- #37: And our single source of truth is this One big plain javascript object; everything is kept as one big object and is composed by reducers
- #38: i. Two properties: 1. Type – string, describes the event - required 2. Payload: optional data; imagine for our initial page we want to load todos, we don’t need a payload, we just go ahead and request some data from the backend
- #39: i. Pure functions ii. Given dispatched action: 1. Responds to action type, 2. Has access to action.payload 3. Composes new state 4. Returns new state
- #40: Centralised state, which is easier to reason about Better testability, remember our reducers which update our state are pure functions and pure functions are so easy to test
- #45: Redux/NGRX is awesome, it gives us predictable immutable state containers that enable efficient change detection and de-coupling of components.
- #48: Applications that deal with lots of data flows changing all the time, like trading apps or network data monitoring apps Also suitable for apps that are almost like a state machine - wizard like
- #49: https://twitter.com/tjholowaychuk/status/957853652483416064
- #50: You need to be intentional about state management, make sure to have a strategy and an easy way for developers to work together
- #53: Start with a question? We have reducers, what do we miss? You need to get data from the server? Reducers, pure functions To perform side effects - Reducers represent sections, or slices of state within your application and should be structured and composed accordingly.