Boost js state management
Download as PPTX, PDF2 likes243 views
The document discusses state management in web applications using Redux and MobX. It presents a call center management app to demonstrate both approaches. Redux uses actions, reducers, and middleware for state management with a defined data flow. MobX uses decorators to automatically manage state with less code but less testability. Best practices include connecting only smart components to the store and using the store for reusable data. While Redux is more complex and testable, MobX is more automatic but "magical".
Boost js state management
- 1. The battle of state management Ran Wahle Tikal
- 2. • What is state management? • Presenting our app • Same app – The Redux way • Same app – The Mobx way • Summary
- 3. A little bit about me • Javascript developer at Tikal • Consultant, speaker • Volunteering programmer • Poor UI designer
- 4. Why state management Component Component Component Component Provider Provider Provider
- 5. Why state management Component Component Component Component Provider Provider Provider Provider Provider Provider Component Component Component Component
- 7. State management gives us • One store to rule them all • Better debugging (~)
- 8. Demo – Call-canter Management app
- 9. The Redux way • Actions • Reducers • Middlewares
- 10. Redux pipeline Dispatch action Apply middleware logic Run reducer code
- 11. Redux to ngrx glossary dictionary Redux ngrx State State Reducer Reducer Middleware Effect Selector Selector Action Action
- 12. The Mobx way • Decorates your model • Create your store
- 13. Why Mobx • It is automatic easy • It reduces your code to minimum
- 14. And why not? • It may be too easy • It couples your model with logic • It is less testable than redux
- 15. Some best practices • Connect only smart component to the store • Use store for reusable data • Wish to preserve state for single screen? Preserve limited data only.
- 16. Summary • We’ve seen two ways for state management • There is a manual, more testable and more complex one • We’ve seen automatic, less testable and more ”magical” one
- 17. Other resources • Good performance benchmark https://twitter.com/mweststrate/status/718444275239882753 • Redux page on github https://github.com/reactjs/redux • Mobx page on github https://github.com/mobxjs/mobx • Chrome extensions: Mobx - https://chrome.google.com/webstore/detail/mobx-developer- tools/pfgnfdagidkfgccljigdamigbcnndkod Redux - https://chrome.google.com/webstore/detail/redux- devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
- 18. Thank you Ran Wahle ranw@tikalk.com , ran.wahle@gmail.com @ranwahle https://blogs.microsoft.com/ranw https://github.com/ranwahle