Difference between Redux and Mobx

Posted in Articles

I once asked the question of what is the differences between Redux and Mobx. The both provide state management for React apps.

So I wrote a ToDo app using Redux and separately with Mobx.  You can find the Redux tutorial here and the Mobx tutorial here.

I found that Redux has a steeper learning curve, more moving parts, and more code to write.  But with that, it give you greater control and power.   Mobx is easier to learn and quicker to develop in.

In summary, Redux is great if you have a large complex project and need the fine-grained control.  For smaller simpler apps where that might be an over-kill, Mobx might be more suitable and quicker.

Mobx is newer than Redux.  Hence Redux has a larger market share and more developer tools such as Redux developer tool and time travel debugging etc.

Other differences…   In Mobx, an action is a function.  In Redux, an action is an object and action creator is a function.   In Mobx, it typically has multiple stores.  In Redux, it typically has multiple reducers instead.

In Redux, if you are making asynchronous calls, you would want to use redux-thunk or redux-saga.  Redux also gives you mapStateToProps and mapDispatchToProps to control what part of the store you want to be exposed in your props.  In Mobx, many things are done automatically for you.  So all states in a store is exposed as props automatically.

In Mobx, there is the idea of a computed value in the store.  The action in Mobx coded in the same location as the states.  There is no reducer.

Leigh Halliday has a nice comparison between Mobx and Redux and also built an app using both to compare.

---