Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MobX vs. MobX State Tree

Why should I use MobX State Tree over vanilla MobX? It seems like any time I read about MobX, MST is mentioned in the same place. Is anyone actually using just MobX by itself?

Probably too general of a question...

like image 891
John Avatar asked Mar 17 '19 21:03

John


People also ask

What is the difference between MobX and MobX state tree?

I'll explain it like this: MobX is a state management “engine”, and MobX-State-Tree makes it feel a lot more like Redux by giving it structure. MobX-State-Tree (MST) lets you define stores full of data, observe changes to that data, and trigger re-renders.

What is MobX state?

MobX is a simple, scalable, boilerplate-free state management solution. It allows you to manage application state outside of any UI framework, making the code decoupled, portable and, above all, easy to test. It implements observable values, which are essentially using the publish/subscribe pattern.

Is MobX better than Redux?

2. Debug process: Compared to MobX, debugging in Redux is a better experience because it has more developer tools and less abstraction. The Redux becomes more predictable with the flux paradigm. Debugging in MobX is much more difficult due to increased abstraction and average developer tools.

Is Redux faster than MobX?

Based on the developer community, popularity, and scalability, Redux performs better than MobX. But if you're looking to get up to speed quickly and build simple apps with less boilerplate code, MobX might be your best bet.


2 Answers

Actually, MST or MobX State Tree is a very descriptive name if you think about it.

MobX is fast, but doesn't provide any organizational structure out of the box, therefore centralized operations like taking snapshots of the whole state, restoring the state from the snapshot, auto synchronizing separated stores, time travel or hot reloading are either not possible or up to developer to support.

MST supports all of the above mentioned (and more) out of the box by organizing separate stores into a single tree of interactive and interacting nodes.

Central in MST (mobx-state-tree) is the concept of a living tree. The tree consists of mutable, but strictly protected objects enriched with runtime type information. In other words, each tree has a shape (type information) and state (data). From this living tree, immutable, structurally shared, snapshots are automatically generated.

However all of this comes at some cost and MST in general is somewhat slower than pure MobX. So if you do not need those features, do not hesitate to use just MobX.

like image 118
jayarjo Avatar answered Oct 07 '22 17:10

jayarjo


Yes, many people use "vanilla" MobX -- it has immense value all by itself. The core concept of leveraging "observable" state is the killer feature of MobX. For me, using it along with React, it has enabled me to fearlessly handle large amounts of connected data in the browser, without worrying about "refresh" issues or "calculated value" issues.

The extra layer of "MST" just adds more (opinionated) structure. ( good if you like being told what to do ;) It is more like a "Redux"-style state manager, where state transitions are clearly defined, and things like time-travel are possible. For me, MobX by itself solves a lot of problems, and I suggest that anyone new should stick to "vanilla" MobX, and not even think about MST until you really appreciate what you are getting from MobX itself.

like image 35
Nick Perkins Avatar answered Oct 07 '22 17:10

Nick Perkins