With a lot of built-in abstraction, MobX demands a lot less “typing” and results in a lot less boilerplate code. Since most JavaScript developers are well familiar with object oriented programming, MobX comes naturally to them. Moreover, employing Redux demands that you learn to work with Redux middleware like Redux Thunk, making the learning curve steeper still. Being a combination of Flux and functional programming concepts, Redux is easier to stomach for those with experience in functional programming. This is especially true for developers coming from an object-oriented programming background. The path to Redux proficiency is a long one, but those who’ve traversed the steep route claim it’s worth it. Moreover, the lack of efficient tools for MobX debugging and testing add another hurdle for developers considering MobX for their state management needs. Unlike Redux, MobX relies a lot more on abstraction, which can produce unpredictable results and generally make debugging difficult.
Add to that a superior set of developer tools (including time traveling) and you got yourself code that is a breeze to debug. Debugging Redux – PredictableĪs mentioned above, Redux is a lot more predictable than MobX as it comes with a lot less abstraction. The predictability of pure functions makes Redux much easier to test, maintain and scale than MobX.
The purity and somewhat rigid approach of Redux is an advantage when it comes to scalability and debugging of applications. In this category, MobX is a clear winner.
Since MobX is a lot more implicit in nature, it packs a lot less boilerplate. This is especially true when it comes to React applications. Perhaps one of the main shortcomings of Redux is the sheer volume of boilerplate code it brings. While it may be easy to implement, testing and maintaining can become a nightmare of unpredictable outputs. On the flip side there’s MobX that allows for states to be easily updated and overwritten with new values. Reducers are pure functions, as they receive a state and action and return a new state. This means that states are all read-only, and reducers can overwrite a state invoked by an action. We’ve already established that Redux uses a single, immutable source of truth for the states stored. So it’s no wonder many find MobX to be an obvious winner in this category. Quite clearly, automation makes for an easier life for a developer. MobX uses observable (or noticeable) data to automatically track changes through subscriptions. Which can add quite a bit of overhead when it comes to applications with complex states to manage and maintain. This requires that updates be tracked manually. Redux uses simple JavaScript objects as the data structure to store the state. Store data structure Redux – JavaScript objects The disadvantage is clear – multiple stores can quickly lead to clashes and unpredictable results when multiple applications make changes to the domain state. All the while, the UI store would remain specific to the current application. The advantage of multiple stores is in the ability to reuse and query the domain state universally, including other applications. Unlike Redux, MobX usually maintains at least two stores – one for the UI state and one (or more) for the domain state, and they contain denormalized data. For most developers working on large React projects, having a single source of truth to refer to can be a huge advantage. The upside is in the intuitive nature of this approach. The downside of this is that the store can quickly turn into an enormous. This makes it easier to know exactly where to find the data/state. Redux state is immutable and for each new state, an ancestor state is cloned. It serves as the single source of truth containing normalized data. That said, there are some criteria where there is an obvious “winner” between Redux and MobX. There is no doubt that the main criteria for choice is personal preference and coding “style”, as well as project needs. Our short introduction to MobX and Redux makes it obviously clear that the functionality they offer and the impact on your workflows differ greatly.