Mobx for Dummies - Yauheni Nikanowich - React Warsaw #5
5 likes1,135 views
MobX is a state management library that makes state reactive by making it observable. It works well with React by re-rendering components when the observable state changes. MobX adds observable capabilities to existing data structures like objects and arrays. Components can be made reactive by using the @observer decorator, which forces re-rendering when observable data changes. Actions are used to explicitly define state modifications and provide debugging information. Computed values automatically re-calculate when dependencies change. MobX includes tools for visualizing component re-rendering and state changes.
Mobx for Dummies - Yauheni Nikanowich - React Warsaw #5
- 1. MOBX FOR DUMMIES YAUHENI NIKANOVICH
- 2. MobX is a simple, scalable and battle tested state management solution The philosophy behind MobX is very simple: Anything that can be derived from the application state, should be derived. Automatically.
- 3. FLOW
- 4. REACT-MOBX React and MobX together are a powerful combination. ‣ React renders the application state by providing mechanisms to translate it into a tree of renderable components. ‣ MobX provides the mechanism to store and update the application state that React then uses.
- 5. MobX adds observable capabilities to existing data structures like objects, arrays and class instances. Observable ES NEXT ES5 Usage: ‣ observable(value) ‣ @observable classProperty = value
- 6. Observer Observer function / decorator can be used to turn ReactJS components into reactive components. It wraps the component's render function in mobx.autorun to make sure that any data that is used during the rendering of a component forces a re-rendering upon change. Observer is available through the separate mobx-react package.
- 7. Usage: ‣ observer(value) ‣ @observer class className { . . . } Observer STATELESS STATEFULL
- 8. Observer and store(s) In order to bind a component and store(s) we can use Provider component. Provider allows to inject passed stores from the child components by using props.
- 9. Observer adds lifecycle hook When using mobx-react you can define a new life cycle hook, componentWillReact that will be triggered when a component will be scheduled to re-render because data it observes has changed ‣ componentWillReact doesn't take arguments ‣ componentWillReact won't fire before the initial render (use componentWillMount instead)
- 10. When to apply Observer There is a simple rule: all components that render observable data With @observer there is no need to distinguish 'smart' components from 'dumb' components for the purpose of rendering It makes sure that whenever you start using observable data, wrapped component will respond it
- 11. MobX-React DevTools In combination with @observer you can use the MobX-React DevTools, it shows exactly when your components are re-rendered, also it shows data dependencies of your components
- 12. MobX-React DevTools VISUALIZE COMPONENT RE-RENDER SHOW COMPONENT DEPENDENCY TREE LOG STATE CHANGES/REACTION
- 13. Characteristics of Observer component ‣ Observer only subscribe to the data structures that were actively used during the last render. This means that you cannot under- subscribe or over-subscribe. You can even use data in your rendering that will only be available at later moment in time. This is ideal for asynchronously loading data. ‣ You are not required to declare what data a component will use. Instead, dependencies are determined at runtime and tracked in a very fine-grained manner. ‣ Usually reactive components have no or little state, as it is often more convenient to encapsulate (view) state in objects that are shared with other component. But you are still free to use native state. ‣ @observer implements shouldComponentUpdate in the same way as PureRenderMixin so that children are not re-rendered unnecessary. ‣ Reactive components sideways load data. Parent components won't re-render unnecessarily even when child components will. ‣ @observer does not depend on React's context system.
- 14. Action Any application has actions. Actions are anything that modify the state. With MobX you can make it explicit in your code where your actions live by marking them. Actions help you to structure your code better. Action is advised to use on any function that modifies Observables or has side effects. Action also provides useful debugging information in combination with DevTools Action using action is mandatory when strict mode is enabled
- 15. Action takes a function as argument and returns it after wrapping it with transaction and allowStateChanges Action Usage: ‣ action(fn) ‣ action(name, fn) ‣ @action classMethod() ‣ @action(name) classMethod()
- 16. Transaction is a kind of scope of operations. Obserber will not notified before transaction will not done Note that transaction runs completely synchronously Transactions can be nested. Only after completing the outer transaction pending reactions will be run Transaction allowStateChanges Can be used to (dis)allow state changes in a certain function. Used internally by action to allow changes, and by computed and observer to disallow state changes.
- 17. Strict mode Enables / disables strict mode globally. In strict mode, it is not allowed to change any state outside of an action Usage: ‣ useStrict(boolean) Violation consequence:
- 18. Computed With MobX you can define values that will be derived automatically when relevant data is modified. By using the @computed decorator
- 19. PropTypes mobx-react provides the following additional PropTypes which can be used to validate against MobX structures: ‣ observableArray ‣ observableArrayOf(React.PropTypes.number) ‣ observableMap ‣ observableObject ‣ arrayOrObservableArray ‣ arrayOrObservableArrayOf(React.PropTypes.number) ‣ objectOrObservableObject Import PropTypes from mobx-react and use it: ‣ PropTypes.observableArray
- 20. PROS AND CONS Pros: ‣ Makes your components reactive ‣ Easy to understand ‣ Friendly for users with OOP background ‣ Less code ‣ Steep learning curve ‣ Responsive community ‣ ?? Magic ?? Cons: ?? Magic ??
- 21. Useful Links: ‣ Git repo: https://github.com/mobxjs/mobx ‣ Official Documentation: https://mobx.js.org/index.html ‣ MobX Creator on Medium: https://medium.com/@mweststrate ‣ Cheatsheet: http://ricostacruz.com/cheatsheets/mobx.html ‣ Boilerplates: https://mobx.js.org/faq/boilerplates.html Q & A
- 22. YAUHENI NIKANOVICH Thanks for attention SLIDES: goo.gl/5qSjIt EMAIL: zhenyanikon@gmail.com