Need help with mobx-keystone?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

xaviergonz
287 Stars 14 Forks MIT License 560 Commits 29 Opened issues

Description

A MobX powered state management solution based on data trees with first class support for Typescript, support for snapshots, patches and much more

Services available

!
?

Need anything else?

Contributors list

No Data

mobx-keystone

A MobX powered state management solution based on data trees with first-class support for Typescript, snapshots, patches and much more

npm license types

CircleCI codecov Netlify Status

Full documentation can be found on the site:

mobx-keystone.js.org

Introduction

mobx-keystone
is a state container that combines the simplicity and ease of mutable data with the traceability of immutable data and the reactiveness and performance of observable data, all with a fully compatible Typescript syntax.

Simply put, it tries to combine the best features of both immutability (transactionality, traceability and composition) and mutability (discoverability, co-location and encapsulation) based approaches to state management; everything to provide the best developer experience possible. Unlike MobX itself,

mobx-keystone
is very opinionated about how data should be structured and updated. This makes it possible to solve many common problems out of the box.

Central in

mobx-keystone
is the concept of a living tree. The tree consists of mutable, but strictly protected objects (models, arrays and plain objects). From this living tree, immutable, structurally shared snapshots are automatically generated.

Another core design goal of

mobx-keystone
is to offer a great Typescript syntax out of the box, be it for models (and other kinds of data such as plain objects and arrays) or for its generated snapshots.

To see some code and get a glimpse of how it works check the Todo List Example.

Because state trees are living, mutable models, actions are straightforward to write; just modify local instance properties where appropriate. It is not necessary to produce a new state tree yourself,

mobx-keystone
's snapshot functionality will derive one for you automatically.

Although mutable sounds scary to some, fear not, actions have many interesting properties. By default trees can only be modified by using an action that belongs to the same subtree. Furthermore, actions are replayable and can be used to distribute changes.

Moreover, because changes can be detected on a fine-grained level, JSON patches are supported out of the box. Simply subscribing to the patch stream of a tree is another way to sync diffs with, for example, back-end servers or other clients.

Since

mobx-keystone
uses MobX behind the scenes, it integrates seamlessly with
mobx
and
mobx-react
. Even cooler, because it supports snapshots, action middlewares and replayable actions out of the box, it is possible to replace a Redux store and reducer with a MobX data model. This makes it possible to connect the Redux devtools to
mobx-keystone
.

Like React,

mobx-keystone
consists of composable components, called models, which capture small pieces of state. They are instantiated from props and after that manage and protect their own internal state (using actions). Moreover, when applying snapshots, tree nodes are reconciled as much as possible.

Requirements

This library requires a more or less modern Javascript environment to work, namely one with support for:

  • MobX 6, 5, or 4 (with its gotchas)
  • Proxies (when using MobX 5, or MobX 6 with the proxies setting enabled)
  • Symbols
  • WeakMap/WeakSet

In other words, it should work on mostly anything except it won't work in Internet Explorer.

If you are using Typescript, then version >= 3.7.3 is recommended, though it might work with older versions.

Installation

npm install mobx-keystone

yarn add mobx-keystone

Full documentation

Full documentation can be found on mobx-keystone.js.org

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.