MobX is a simple, scalable, and standalone state management library. Although, most popular frontend frameworks, i.e., React, Angular, and Vue use the implementations of MobX.
It is a great tool, especially for React applications. This blog is focused entirely upon the basics of MobX and we’ll discuss its working and core concepts here-
What is MobX??
An open-source tool that makes state management easier and scalable by applying transparent functional reactive programming (TFRP).
Inconsistent states make applications unmanageable which is why most of the conventional state management libraries make their states immutable and restrict them in ways that modify their states which becomes a problem because it makes it impossible to use the concept of classes.
MobX, however, simplifies this process by resolving the key issue- it enables referential consistency of the states. It follows a straight strategy — whatever can be derived from an application state, will be derived. As simple as that!
The following features make it a wonderful tool for application state management-
- Architectural Freedom: MobX enables you to manage your application states outside the UI framework, which makes your code portable, decoupled, and easily testable.
- Straightforward: With a minimal amount of code, you can do whatever it is that you intend to do. Without needing any special tools, you can update your data in an asynchronous process. The MobX reactivity will track all the changes and propagate them to where they are being used.
- Optimal Rendering: All changes in the data are tracked at runtime, building a dependency tree where all the relations between state and output are captured.
Core Concepts
MobX treats your application like a spreadsheet. The derivations are like formulas and charts of the spreadsheet that can be derived from the data cells, all the data cells having values are considered as the observable states, getting the output of any formula or data cells is called a reaction, and changing the data cells or formula is called an action.
Application State
It refers to the model of the applications that may consist of different datatypes including graphs of objects, numbers, cyclic data structures, arrays, references, primitives. You can store the state in any data structure you like. All you need is to make sure that you have marked all the properties, that you may change over time, as observable to enable MobX to track them.
The state is basically the data that drives your application.
Marking properties observable is actually specifying them as an annotation per property. Some other annotations are-
- Observable: it defines a trackable field to store states.
- Action: it marks a property as an action that will alter the state.
- Computed: Anything that will derive new facts from the state.
Derivations
Also known as ‘computed values’ as these derivations can be computed from the current application state using a pure function. These derivations can range from simple values to complex ones. They are very useful and act as formulas that help reduce the amount of state you need to store.
The derivations can exist in three forms mainly-
- User interface (UI)
- Derived Data
- Backend integrations
They derive information from other observables and only recompute if one of the underlying undergoes any change.
Actions
Actions in MobX are the methods that manipulate, alter, or modify the application state. Actions occur whenever anything changes like a button clicked, a message arrived, and input changed, etc. MobX ensures that the derivations and reactions automatically process to all the changes caused by actions. Actions structure your code and also prevent changing states unintentionally.
However, makeAutoObservable eases your job by automatically declaring the actions.
Reactions
Reactions are a very important concept in MobX to learn about. They bridge the gaps between the two worlds of imperative programming and reactive programming.
MobX reacts to any existing observable property that is read during the execution of a tracked function.
Reactions are the side-effects that occur automatically whenever a state changes. In a way, reactions are similar to computed values but instead of deriving information, they cause side-effects. Some common side-effects are-making network requests, printing to console, updating react components, etc.
Reactions can be created using autorun utility. Here’s how it works-
The autorun function accepts a function that runs whenever something relevant changes or when you create autorun itself. It reacts to this change by running the effect.
Once the effect runs, MobX keeps track of all properties marked observable and the derivations which are being read by it and as soon as the function finishes, MobX will subscribe to all the observables that were read and will wait for them to change again. And when it happens, it will trigger the autorun again and the process keeps repeating itself.
Reaction works very similar to autorun but instead of only one function, it initializes two functions: data function and effect function.
The data function returns data that is used as input to the effect function. The side effect reacts only to the data that was accessed during the data function and in this way, controls when the effect function triggers.
Installation
MobX works in ES5 environment including browser and Node.js. It can be installed via npm or yarn through this command-
yarn add mobx
or
npm install --save mobx
You can also install it directly from CDN- https://cdnjs.com/libraries/mobx
To learn more about MobX, see through this documentation.
Wrap Up
MobX is a smart tool and this was just the briefest glimpse into its functionalities. However, I hope that you got the basic concepts here. I would love to see you implement it in your next project.
Happy reading!!