Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium

Mobdux: combining the good parts of MobX and Redux  #ReactJS #Redux #Mob

  • In MobX it is easy to structure your stores in a tree-like manner so that at any point you can view the entire state of your application.
  • Additionally, by using MobX in strict mode, you are forced to make any mutations to your state in actions.
  • The combination of a single store, strict mode, and the excellent mobx-react-devtools help give back some of the predictability and traceability of Redux.One of the ways the libraries significantly diverge however, is when connecting your state to your components.
  • Redux on the other hand, recommends the smart component / dumb component pairing so that each component (regardless of where it sits in the hierarchy) can look up everything it needs to render itself.I prefer the Redux approach for a number of reasons:Easier to move things around in your component…
  • Also, we can remove all knowledge of MobX from our dumb components by encapsulating all of this logic in our smart component wrapper, removing the need for the observer decorator entirely.

MobX and Redux give you two opposing ways to manage your state effectively in a React application. As an experiment I attempted to merge the good parts of both approaches, and ended up with a new…

MobX and Redux give you two opposing ways to manage your state effectively in a React application. As an experiment I attempted to merge the good parts of both approaches, and ended up with a new library, mobdux.

In this article I’ll be outlining the thought process and some problems with the initial approach that led to the inception of mobdux. Let’s start by breaking down the good and bad parts of each library.

It is possible (and even recommended) to follow a similar state structure in both libraries, in that your entire application state should exist in one place. In Redux, you get this for free as your state must be represented as one large, serialisable blob. In MobX it is easy to structure your stores in a tree-like manner so that at any point you can view the entire state of your application. In fact, the author is currently working on a library that enforces just that. Additionally, by using MobX in strict mode, you are forced to make any mutations to your state in actions. The combination of a single store, strict mode, and the excellent mobx-react-devtools help give back some of the predictability and traceability of Redux.

One of the ways the libraries significantly diverge however, is when connecting your state to your components. MobX is largely unopinionated about how this is done. Most of the documentation points consumers in the direction of just decorating all of their components as…

Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium