This document discusses state management in Angular applications and introduces Redux. It covers what state is, different ways to manage state like services and Observables, and why Redux is useful with its core concepts of actions, reducers, and a single store. Mobx is also discussed and compared to Redux. Guidelines are provided for choosing between them. The document includes code examples and concludes with references for further reading.

1. UI State Management
- An Intro to Redux through ngRx

2. Agenda
• What the heck is state in a app ?
• Different ways to manage state in a Angular (2+) App ?
• What is Redux ?
• Why Redux ?
• Mobx vs Redux
• When to choose what ?
• Case Study from a recent Redux Implementation

3. What is State in a App?
• By definition , a state is a representation of a system in a given time.
• State refers to the data stored in your application code in the form of
string, arrays, objects etc

4. Managing State in a App
View1
View
3
View
2
App with 3 views and
shared state
App with many views
and a more complex
shared state
As an app grows, so does the complexity of
managing the state
V1
V2
V3V4
V5
App with 5 views and
shared state

5. Different ways to manage State in Angular
Apps
• Angular Services
• Observables using RxJS
• Redux – ngRx/angular-Redux
• Mobx – mobx-angular

6. Talk is cheap, lets see some code…
• State Management through Angular Services
• State Management through Observables powered by RxJS
• State Management through Mobx

7. Redux – Core tenets
• Actions
Events that may trigger state changes. Example – Mouse clicks, XHR request/response, Form submit, Web
Socket stream changes etc
• Reducers
Pure functions that produce a new state given the current state and an action
• Store
One single storage (a single JSON object) storing the entire state of the App.
Provides API for dispatching actions and selecting state
• Effects/Epics
To handle side effects in the App

8. Redux – Unidirectional Flow of Data
Action dispatched to Store
Reducer handle action and produces a new state
Store gets updated with new state
UI gets updates on the new state
UI Event or Network Event

9. State Management With Redux
Stor
e
View
1
View
2
View
3
View
4
1. Views are decoupled
from the state.
2. Store could be only
modified by action
triggers.
3. There is always only
one way to change the
data

10. Talk is cheap, lets code this time…
• Implementing delete functionality in sample App using Redux

11. Why Redux ?
• Application – easier to reason about, more predictable
• Code Base - easy to understand especially for new devs, more
maintainable
• Excellent tooling – Redux browser extensions, Time Travel Debugging
• Easier to Test

12. Mobx vs Redux
Mobx Redux
Pros Pros
Easy to understand. App is more predictable
Achieve more with less code Excellent debugging tools
Ease of testing
Cons Cons
Code organization and maintenance on
developers. With more freedom,
likelihood of messing up the code org.
More boiler plate
Debugging not that easy as there is lot of
auto magic
Highly opinionated

13. When to choose what ?
Choose Mobx if your app
• Is small
• Will be worked on/maintained by 3-4 developers
• Is not expected to scale much
Choose Redux if your app
• Is being worked by a large team of developers
• Is expected to scale
• And if you want the best of developer experience ☺

14. Redux Case Study
Time for seeing some more code from a real app used...

15. References
Blog Post
• UI as a function of state
• Code Cartoons – Intro to Redux
• Redux or Mobx
Videos
• Dan Abramov – Hot Reloading n Redux
• Tackling State – Talk by Victor Savkin
• State Management Patterns, ngRx BestPractices
Sample App – Source Code
• My Good Reads App – Github link