Redux vs MobX : Which is Better For State Management in React?

Before diving into a comparison between two of the most popular state management libraries redux and MobX, let’s first understand the need for a state management library. State management in React has been a subject of dialogue within the Javascript fraternity.

As we know In ReactJs, each component maintains its own local state, and generally, the root component maintains the state of your whole application. Multiple components may maintain their state across component life cycle methods like at the time of mounting, updating, etc. But the problem is as the complexity of your application grows, the state of the component becomes unpredictable, and debugging such an application becomes a lengthy process. It also becomes complex to maintain your states between multiple components.

This is the scenario when the state management libraries(Redux/MobX) comes into the picture.

But, wait now the question is which state management library should I choose? Redux or Mobx?

In this article, we will explore the pros and cons of both. Both Redux and MobX work well with react. We will compare both libraries based on some important points.

Store

Basically, a store is a single source of truth from where your data originates. In simple words, a store is a place where you keep data of your whole application.

Redux has one large store in which states of an entire application are stored.

But, MobX has more than one store. As a result in MobX, you can reuse and separate your stores. for example, you can use a store inside another store.

// First store
class FirstStore {
    @observable flag = false;
}
export default const firstStore = new FirstStore();
// Second store that using first store
import firstStore from 'FirstStore.js';
class SecondStore {
    @observable flag2 = false;
    @action setFlag = () => {
            this.flag2 = firstStore.flag;
    }
}

Immutable vs mutable

Redux uses immutable states. This means Redux state is read-only, reducers take the previous state and action as parameters and return a new state. You cannot directly overwrite them.

In MobX states can be overwritten. You can read and write the write MobX store.

Plain data vs Observable data

Redux uses a normal Javascript object to store the data. It means Redux stores data in a plain JavaScript object or arrays.

{
    person = {
      firstName : "John",
      lastName  : "Doe",
      age     : 50,
      eyeColor  : "blue"
    };
}

MobX uses an observable to store the data. It wraps a normal JavaScript object or an array with observable capabilities.

class userStore {
    @observable users = []
    @action getUser = () => {
            return this.users;
    }
    @action addUser = (data) => {
            this.users.push(data);
    }
}

In Redux the data is usually normalized. In MobX, you can keep denormalized data.

Debugging

Since there’s only one store in Redux debugging becomes a lot easier. Also Redux provides powerful developer tools including time travelling. Whereas, debugging becomes a lot harder in MobX as there is more abstraction. And the developer tools existing for MobX are also just average.

Conclusion

• The selection of any state management library should be based on the scale of an application. MobX is the best choice for the small-scale application. For the large-scale application, obviously, you can go with Redux.
• If you prefer to build your app fast then MobX is a better option, as it highly abstracts the mechanism of updating a component based on state changes.
• MobX is much easier to learn and has a steady learning curve. Whereas the Learning curve in Redux is steep and it can be hard to get a complete grasp of Redux straight away.

The most important thing is it depends on what library you wish to use and are comfortable with.

BRdhanani - Overview