MobX - Making state management simple

This sessions demostrates basic usage of MobX in flutter application.

Transcript

1. MobX🚀 Making state management simple
2. Why not setState? • No extra config required • Easy to understand • No boilerplate code
3. Example Let’s hit the code for better understanding👨💻
4. Problem with setState🤦 • Less scalable • Less efficient • Can’t access across the widgets
5. Less scalable/efficient
6. Problem in Best Folk Medicine
7. Say hello to MobX 🙋 • Works on reactive programming concept • Easy to understand • Less boilerplate code (Thanks to build runner)
8. ABC Of MobX • Observable • Actions • Reactions
9. MobX in simple app
10. Observable • Tracks a single value (primitive or complex) • Fires a notification when it changes value so that all connected reactions will re-execute.
11. Action • A function that mutates the Observable • Changes to the observables are only notified at the end of the action Do not mutate observables outside an action.
12. Reaction • Triggers the reactivity in the system • A reaction implicitly tracks all the observables which are being used and then re-executes its logic whenever the depending observables change • No explicit subscription or wiring needed
13. MobX Observer • Re-renders observer when reaction is triggered • Builder function tracks observable in immediate execution context • Do not use nested function inside Observer builder
14. MobX in Action Let’s hit the code again
15. Too much code in Store? Don’t worry, we have MobX code generator
16. Annotations and .g file • @observable • @computed • @action
17. @observable • This annotation makes value observable
18. @computed • Creates value as computed. • It can track multiple value to avoid conditional code in business logic
19. @action • Converts an function as MobX action
20. Generate .g file • Create class • Add .g file • Create abstract class • Fire build runner commands
21. Example with Build runner Let’s hit the code again
22. Required packages • mobx • flutter_mobx • build_runner • mobx_codegen
23. Wear your failure as a badge of honour. - Sundar Pichai (CEO, Alphabet)
24. Thank you🙏