Manage react state with MobX
Download as PPTX, PDF0 likes231 views
MobX is a state management library that can be used with React to simplify sharing state between components. It allows creating observable stores that can be imported into multiple components. This avoids needing to pass props through many levels to reach deep child components. MobX has features like observable, observer, computed and autorun that make it easy to watch for state changes and update components automatically. Stores can be created with observable objects and arrays then components simply use the store without needing to pass state through props.
Manage react state with MobX
- 1. Manage React state with MobX Simple, scalable state management Presented by Asif Nawaz
- 2. What is MobX? • MobX is a super simple state management library. MobX is not a React thing, this is a standalone library, but it’s very popular with React JS. People are very comfortable with this combination.
- 3. React Has State, why on earth we need MobX? WHY?
- 4. Look at this component tree State in React JS is pretty component specific thing. It’s hard to pass it to another component and its pretty complex to pass it to a component when it’s bit far away. Imagine we need to change a of B5 component from A3 component.
- 5. Here MobX is to rescue you • You can create data store with observable array, object etc. with MobX • Import it to multiple components • Share the data between components in an organize way. • No need to pass props through many components to reach the grand child.
- 6. Installation for “create-react-app” • The Library: npm install mobx –save • React bindings: npm install mobx-react --save
- 7. Oh! We need decorator support! • npm install babel-plugin-transform-decorators-legacy –-save-dev • npm run eject • Add this babel plugin in webpack config file, webpack.config.dev.js and webpack.config.prod.js
- 8. It has 4 features • Observable • Observer • Computed • Autorun
- 9. A MobX Store
- 10. Pass it to a component
- 11. Use it!
- 12. autorun • Autorun is for observing multiple variable and do something when their value change.
- 13. DevTools • Install it: npm install --save-dev mobx-react-devtools • Import and use in a parent level component like this
- 14. Links • mobx.js.org • mobx.js.org/getting-started.html • github.com/mobxjs/mobx-react-devtools • github.com/foxhound87/mobx-react-form • Presentation would be found here https://www.slideshare.net/secret/36hXs93Ofz06yZ
- 16. Asif Nawaz A.K.A. asifsaho • Twitter @asifsaho • Facebook fb.me/asifsaho.me • Email: info@asifsaho.me