Boost js state management
18
The battle of state management Ran Wahle Tikal
Transcript of Boost js state management
The battle of state management
Ran WahleTikal
• What is state management?• Presenting our app• Same app – The Redux way• Same app – The Mobx way• Summary
A little bit about me• Javascript developer at Tikal• Consultant, speaker• Volunteering programmer• Poor UI designer
Why state management
Component Component
Component
Component
Provider
Provider
Provider
Why state management
Component Component
Component
Component
Provider
Provider
ProviderProvider
Provider
Provider
Component
Component
Component
Component
State Management
Component Component
Component
Component
Provider
Provider
Provider
Store
State management gives us• One store to rule them all• Better debugging (~)
Demo – Call-canter Management app
The Redux way• Actions• Reducers• Middlewares
Redux pipeline
Dispatch action Apply middleware logic
Run reducer code
Redux to ngrx glossary dictionaryRedux ngrx
State State
Reducer Reducer
Middleware Effect
Selector Selector
Action Action
The Mobx way• Decorates your model • Create your store
Why Mobx• It is automatic easy• It reduces your code to minimum
And why not?• It may be too easy• It couples your model with logic• It is less testable than redux
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.
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
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
Thank you
Ran [email protected] , [email protected]@ranwahlehttps://blogs.microsoft.com/ranwhttps://github.com/ranwahle
![· 4.4 js 43s * : js *ias * : 41.4.] . .](https://static.fdocuments.net/doc/165x107/603c2cf4d2498d188e4cf12f/-44-js-43s-js-ias-414-.jpg)
