Is MobX a good alternative to Redux?

Is MobX a good alternative to Redux?

More and more often, in new projects, MobX appears in place of the king of state management, which is undoubtedly Redux. According to many, it offers a clearer and more efficient way to manage the application state.

What is Redux?

Redux is a library for managing the application state. It is an implementation of Flux architecture created by Meta (former Facebook). The main idea is to create "Single Source Of Truth" as a single store. The store is built from a reducer, which is a function that returns a changed state under the influence of dispatcher actions.

‍

Reducer should meet the assumptions of "pure function", which means that for a given input state, we always get the same result on the output. The previously mentioned actions are usually objects containing information needed to cause a specific change. Dispatcher is a function that passes the action to a reducer.

‍

If we want to use store in React application, we need an additional react-redux library as a connector that allows us to communicate with Redux. Usually, we wrap the application with a provider to which the store is passed, and components communicate via hooks like useSelector and useDispatch, or HOC (higher-order component) connect.

What is MobX?

MobX is a library for managing an application’s state. It is based on decorators that add additional functionality to objects by transforming them into observable state. The construction of the store is not overly complicated. It consists of a JS class (but not necessarily) in which we define the fields and methods that we decorate in the constructor with makeObservable or makeAutoObservable.

‍

Common decorators include observable, computed, and action. Observable transforms an object field into a value that allows the library to report changes in state. Computed, as opposed to observable, is used for values that are calculated from the current state. Action is a decorator that informs the library that a particular method is used to change the state. Communication in React applications is done by calling methods and accessing fields. Store is passed to components through context.

‍

In order for components to detect state changes, they need to be wrapped with an observer function from the additional library mobx-react-lite.

Readability

Because of its more complicated structure, Redux can be difficult to figure out what's actually going on in the code - especially for first-time users. Setting up Redux where we have a single store also makes it difficult when we want to clearly separate its various parts into domains. MobX allows you to create multiple instances which do not necessarily have to wrap the entire application. Communication and store structure is based on mechanisms that seem natural to people familiar with JavaScript. The situation looks even better when using TypeScript because a lot of code can be simplified into decorators from TS syntax.

Performance

According to a benchmark that was posted on Twitter in most cases MobX is able to boast better results than Redux. Check here

What does Redux have in its defense?

The great thing about Redux in this comparision is that it is still a much more popular solution, and with that comes community support. It is also a battle-tested solution and is developed by top developers backed by one of the tech giants that is Meta.

Is MobX a good alternative then?

Is it worth betting on MobX, then? It depends, of course. The decision should always be based on the needs of the project and the team that implements it. Choosing a less popular library always carries a higher risk of encountering problems that no one has yet solved. On the other hand, lower complexity allows you to avoid most problems. It is definitely more difficult to incorrectly design a store based on MobX than it is with Redux.

‍