State management is a hard problem to solve in large applications. Redux and Mobx are both external libraries that are popularly used to solve state management problems.

Redux vs. Mobx

This article assumes that you have a basic idea on how state management works within your web app. Keep in mind that these libraries are not restricted to React, although they work well with React. You could use them with Angular, Vue and other frameworks too.

Redux

Redux is a popular state management solution that is a combination of both Flux and Functional Programming concepts. Some of the core principles of Redux are:

• Redux has a single store – Single source of truth.
• The state in the store is immutable.
• Actions invoke changes to the store.
• Reducers update state.

Mobx

Mobx solves the same problem that Redux does – State management. It helps in managing the local state within your app. Conceptually, Mobx treats your application like a spreadsheet.

Now let’s compare some of the key features of Redux vs. Mobx to see what suits your needs better.

Store

The store is where we will keep the local data. It holds the entire application’s state. The store holds the application’s state in a huge json object.

Redux

In Redux, there is only one store and it is the single source of truth. The state in the store is immutable. This makes it easier for us to know where to find the data/state from. There will always be one source of truth which is the single store.

Mobx

Mobx on the other hand, allows multiple stores. You can logically separate stores, so all the application’s state is not stored in one store.

Winner – Redux

It is hard to determine, who is a winner based on this aspect. I personally like the one store concept of Redux, which makes it obvious to me on where to find the state of my application.

Data Structure

Redux

Redux uses plain JavaScript objects as data structures to store the state. While using Redux, updates have to be tracked manually.

Mobx

Mobx uses observable data. This helps in automatically tracking changes through implicit subscriptions. In Mobx, the updates are tracked automatically. Therefore, making it easier for the developer.

Winner – Mobx 

Pure vs. Impure

Redux

In Redux the state in the store is immutable (cannot be changed). This means that all of the states are read-only. Actions in Redux can invoke changes to state and the reducers can replace the previous state with a new state. This is one of the core principles of Redux.

This makes Redux pure. If you are interested in learning more about pure functions and how they operate in Redux, you can read this article for a better understanding.

Mobx 

In Mobx the state is mutable (can be overwritten). You can simply update the state with new values. This makes Mobx impure.

Winner – Redux

Because Redux store is pure, it is more predictable and it is easy to revert state updates. Whereas, if not done right, Mobx state updates could make it harder to debug.

Boilerplate Code

Redux

One of the biggest complaints about Redux, is the amount of boilerplate code that it comes with. And when you integrate React with Redux, that results in even more boilerplate code. This is because Redux is explicit in nature and a lot of the capabilities have to be explicitly coded.

Mobx

Mobx is more implicit and does not require a lot of special tooling. It comes with much lesser boilerplate code in comparison to Redux. This makes Mobx, easier to learn and setup.

Winner – Mobx

Learning Curve

Redux

In my experience, Redux is not very easy to grasp and learn real quick. It takes some time to understand its patterns and paradigms. It is a combination of the Flux architecture and functional programming concepts. If you are a functional programmer, you may find it easier to grasp Redux.

Learning Redux, also means you need to learn about Redux middleware like Thunks or Sagas, therefore adding on to the learning mix.

Mobx

Mobx is known to be much easier to grasp when compared to Redux. Most of the JavaScript developers are well versed in Object Oriented Programming, which makes learning Mobx simpler. Also, there is a lot of things that are done behind the scenes in Mobx, creating a better learning experience for the developers.

Winner – Mobx

Developer Tools

On this aspect, there is no debate since Redux wins hands down. Redux comes with the “Redux Dev Tools” that is used by thousands of developers. It offers amazing support for debugging Redux code. Mobx tools do not have the same quality of debugging support that Redux provides. Hence, the winner is Redux.

Winner – Redux

Scalability

Since, Redux is more opinionated and expects the reducer functions to be pure, it is easier to scale than Mobx. The opinionated and pure nature of Redux, enables scalability of the apps.

The Redux code is easier to test, since testing pure functions are predictable and simple. This results in maintainable code that eventually scales.

Winner – Redux

Conclusion

So who won? Although, it is hard to determine one way or the other, there are questions you can ask yourself before you pick one of the two libraries.

If your application is simple and small, you can pick Mobx. It is easier to learn and comes with less boilerplate code. On the other hand, if you are building a large scalable application with a large team of coders, Redux could play well.

Thanks for reading ❤

#redux #web-development