Since MST uses MobX behind the scenes, it integrates seamlessly with mobx and mobx-react. But even cooler; because it supports snapshots, middleware and replayable actions out of the box, it is even possible to replace a Redux store and reducer with a MobX state tree. This makes it even possible to connect the Redux devtools to MST. See the Redux / MST TodoMVC example.
Another way to look at mobx-state-tree is to consider it, as argued by Daniel Earwicker, to be “React, but for data”. Like React, MST consists of composable components, called models, which capture a small piece of state. They are instantiated from props (snapshots) and after that manage and protect their own internal state (using actions). Moreover, when applying snapshots, tree nodes are reconciled as much as possible. There is even a context-like mechanism, called environments, to pass information to deep descendants.
How does MST compare to Redux
So far this might look a lot like an immutable state tree as found for example in Redux apps, but there are a few differences:
- like Redux, and unlike MobX, MST prescribes a very specific state architecture.
- mobx-state-tree allow direct modification of any value in the tree, it is not needed to construct a new tree in your actions.
- mobx-state-tree allows for fine grained and efficient observability on any point in the state tree.
- mobx-state-tree generates json patches for any modification that is made.
- mobx-state-tree provides utilties to turn any MST tree into a valid Redux store.
- having multiple MSTs in a single application is perfectly fine.