mobx-utils: community driven utility belt for MobX

MobX is a state management library that is quite unopinionated on how you write your application. It doesn’t dictate how to handle asynchronous requests, how to structure stores or how to serialize data. It aims to be as inter-operable with existing libraries and application architectures as possible.

Nonetheless, there are recurring question themes in our gitter channel. For example, data serialization (for which the serialzr package was released last week), integration with database connectors and handling dirty states.

Without further ado; allow me to introduce the “mobx-utils” package! “mobx-utils” provides a home for generic strategies built on MobX that integrate well with any MobX driven application. The library is not just a source of utilities, consider the source code also as a source of inspiration for your own abstractions. All current utilities are based on code or ideas of MobX community members.

The first version has been released with the following six utilities. Make sure to check the docs for some additional examples!

fromPromise

“fromPromise” takes a thennable and returns an object with the properties ‘value’, ‘state’ and ‘reason’. These properties are all observable and will update whenever the original promise moves to a different state. This makes it trivial to keep your UI up to date with the progress of a promise. In the following example the UI will initially render “loading…” until the original promise settles.

lazyObservable

“lazyObservable” takes a ‘fetch’ function which is not invoked until the observable is needed for the first time. It’s similar to “fromPromise” except that the fetch function will receive a sink that it may push new values to.

fromResource

“fromResource” is the generalization of “lazyObservable”. It can be used to keep an observable in sync with some external datasource, but only as long as the observable is in use by some reaction. This is ideal to connect observables to reactive back-ends. MobX will make sure datasources which are no longer in use will be disposed automatically.

createViewModel

“createViewModel” creates a view model for any model (observable object) you pass to it. This is ideal to create a proxy that will forward any reads to the original model, but stores writes locally until they are submitted (or reset). The dirty status of fields is tracked as well, making it an ideal building block for complex forms.

whenWithTimeout

“whenWithTimeout” is very similar to “when” from the mobx package. Except that you can set a ‘timeout’ and an ‘onTimeout’ callback which will be fired if the conditional expression of “whenWithTimeout” has not been met within the specified time.

keepAlive

“keepAlive” can be used to prevent computed values that are not in use by any reaction to suspend. Automatically suspending is the default behavior of MobX to save CPU cycles and allow garbage collection of observables that run out of scope automatically. Keep alive means that a computed value will always be kept up to date, regardless of whether it is in use somewhere or not. Use it with care.

queueProcessor

“queueProcessor” takes an observable array and a processor function that is fired automatically when new items are added to the observable array. This is a nice building block to creat command queues.

That summarizes the first six utility functions. Make sure to check the docs for examples and details. More utilities will probably follow! That is, if you come up with ideas or code :-)

Last but not least: don’t forget to take a look around at other MobX related libraries!