State Management: Mobx vsRedux

The “State” is the data with which your app is dealing with. State saves the data that a component requires and it influences how the component gets rendered. In React Native a state can be updated using this.state.

Managing the data stored as a state is known as State Management. One of the hardest parts in large front-end applications is state management, because, To manage the state smoothly and more conveniently React Native supports some State Management Libraries (Example: MobX, ReduX). State management can also be termed as a ‘Back Bone’ of React applications.

MobX:

MobX is a library that is used to manage state in any Javascript framework. It has some core concepts: Observable state, Computed Values, Reactions, and Actions. The philosophy behind MobX is “Anything that can be derived from the application state should be derived automatically.” MobX provides the mechanism to store and update the application’s state that uses to render the application. Any browser can support Mobx with ES6 proxy support. Normally React uses state and SetState to update its components; on the other hand, MobX works differently. One can have multiple stores to store the state in MobX.

Observable: Observables hold the state of our application. Whenever there is a change in an observable the application re-renders itself. You can create a variable as an observable by decorating it with @observable.

Here is an example code to make a variable observable:

Computed Value: Computed Value is a derivative of observables. It gets updated automatically when the observable is changed, provided the computed value is being observed by an Observable . To create a variable as a computed value it must be decorated with @computed.

Here is an example code to make a variable a computed value:

As delayMessage is a computed value, MobX will make sure that delayMessage is automatically updated when there is a change in the value of count.

Reactions:Reactions are identical to computed values, the only difference is that they produce a side-effect instead of returning a new value. Some examples of side-effects are making network requests, printing to console, patching DOM, etc. MobX provides three types of reaction functions when, autorun and reaction.

i. Autorun: It is a function that runs every time the state is changed.

ii. When: it is triggered whenever a certain condition is met. It requires two parameters, the first parameter is a function that gets recalled until it returns a true value, the second parameter is a function that is called when the first function returns a true value.

iii. Reaction: the reaction is similar to autorun but it gives us more control over what properties we need to check. It accepts two functions i.e data-function and side-effect-function,data-function watches for changes in data i.e it observes the data and it returns a value that is used as input in side-effect-function.

To get started with MobX install the following dependency:

npm i mobx mobx-react — save

We will also need to install a babel plugin so we can use ES7 decorators:

npm i @babel/plugin-proposal-decorators

Now open your code editor and go to babel.config.js and add the following code:

Now that you have configured your project you can start writing some code.

Redux:

Similar to MobX, Redux is also a state management library that can be used with any javascript framework. The primary use of Redux is that one can use one application state as a global state and interact with the state from any react component very easily whether they are siblings or parent-child. When multiple components of an application try to communicate with multiple other components, then simple data management as parent-child using props becomes difficult. In such cases, Redux comes to rescue.

Actions: they are payloads that contain the information that sends data from your application to the store.

Reducers: Actions tells that something has changed, but it does not specify how the application should respond to that change. This is what reducers do. Whenever there is a change in state of an application it is the reducers job to make the necessary changes and reflect it in the application.

Store: This is the place where the entire state of application is stored. It is recommended to use a single store for the entire application rather than having multiple stores.

To get started with Redux install the following dependency:

npm install react-redux

npm install redux

Example of a redux store:

The state of your application is stored in an object tree inside a single store. The only way to change a state tree is to invoke an action.

To create a redux store, Go inside the src folder then create a folder named store and inside this add a file called configStore.js and add the following code.

Redux vs. MobX:

While there are several approaches to solve the state management problems, Redux and MobX are two of the most popular state management libraries.

Popularity:

Let us see the google trends graph.

This graph as of 30th April 2020 clearly shows that Redux is much more searched on google as compared to MobX.

Learning:

The most common opinion among developers about Redux is that ‘it is not easy to learn.’ one needs more time to understand its pattern and paradigms. It is a combination of flux architecture and functional programming, which that means, if you are a functional programmer, you will find it easier to understand, on the other hand, if your background is object-oriented programming you will have a hard time in understanding redux.

MobX, on the other hand, is much easier to learn. As most javascript developers have an object-oriented programming background, they find learning MobX easier as compared to Redux.

Data Storage:

In Redux there is only one store. The state in the global store is immutable, which makes it easier for developers to know where to find the state. In redux, one can split the code into reducers to logically separate the concerns with multiple reducers. In redux, the data is normally normalized, and it uses a javascript object to store the data, i.e. you will have to manually track the update of data. This could be a hard task in a large front end app where huge states are to be maintained.

Whereas, in MobX, we can have multiple stores. You can separate the stores in different folders, so all of the application’s state is not in one store. In MobX, you can have denormalized data and it uses an observable to store the data, i.e you can listen to an observable and automatically track the update of your data, therefore, making it easier for developers.

Boilerplate Code:

One of the biggest drawbacks of Redux is the amount of boilerplate code that comes with it. This is because Redux is explicit and a lot of the capabilities have to be explicitly coded.

MobX, on the other hand, is implicit and it does not need a lot of special tooling. It has less boilerplate code as compared to redux.

Npm Downloads Stats:

redux:

MobX:

In the end, it entirely depends on a developer and the requirements of a project to decide which state management library will be better, Redux or MobX.