mobx-state-tree at @ReactEurope 2017


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.

An introduction to the philosophy can be watched here. Slides. Or, as markdown to read it quickly.

mobx-state-tree “immutable trees” and “graph model” features talk, “Next Generation State Management” at React Europe 2017. Slides.

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.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s