Why we shifted from Redux to MobX

Nachiket Patel -

Redux & MobX both are state management libraries for Javascript. Primarily they are built for React & provides excellent React support, both can be and are getting used independently. This post does not go into technicality rather focuses on team level dynamics.

Experience with Redux

We have been using Redux in all of our Web & Mobile (React-Native) projects for over a year. It was difficult for the whole team to onboard at first, because of functional programming paradigm it follows, as we primarily follow & write Object Oriented style code. But after few months it wasn't a problem. What Redux did was, it really brought predictability to the project, and it really worked well with big size projects. Redux really makes it hard to do things messy way for developers, as it doesn't provide a lot of flexibility, and exactly dictates how you should do state management & structure your code. The only drawback I found is that developer has to write a lot of boilerplate code.

We work on multiple projects for our clients, we developed internal reusable libraries for a lot of common functional & technical requirements. This is where we came across a lot of difficulties using Redux, especially with Meta programming. Maybe due to our lack of experience in functional programming.

Experience with MobX

Around Dec-2017 we started experimenting with MobX, It was immediately clear that it has shorter learning curve then Redux. MobX gives much more flexibility in how you structure code, but it can be a bad thing as the whole team needs to follow certain code/state management practices. Also, there is a challenge to develop in-house state management structure/architecture, which can take some time to develop and get it right. Ultimately each and every developer has a higher responsibility of following system architecture.

MobX is primarily Object Oriented & has very less code footprint in your code. We felt at home as we primarily design & work with Object Oriented systems. After doing some small-scale projects, we had our web & mobile app architecture which fits best for our use cases & needs.

MobX-state-tree

One important library to mention is Mobx-state-tree. MobX does not provide immutable state & transactional support out of the box.

From MobX-state-tree documentation

Simply put, mobx-state-tree tries to combine the best features of both immutability (transactionality, traceability, and composition) and mutability (discoverability, co-location, and encapsulation) based approaches to state management

It also provides inbuilt Normalization, in Redux you would use something like Normalizr (It's very awesome library)

Summary

Few pointers from our learning:

  • If your team got good experience with Object Oriented programming. MobX > Redux
  • Project is super-large corporate/enterprise. Redux > MobX
  • If you don't want to derive own code structure/architecture of state management, Redux > MobX
    Note: These are my own views & based on our development team & projects. These may or may not be applicable for everyone

Feel free to get in touch, if you would like to get some more insights of developer experience related to Redux & MobX