MobX: React State Management using TFRP

MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). The philosophy behind MobX is very simple:

Anything that can be derived from the application state, should be derived. Automatically.

which includes the UI, data serialization, server communication, etc.

MobX unidirectional flow

 

https://github.com/mobxjs/mobx

MobX provides mechanisms to optimally synchronize application state with your React components by using a reactive virtual dependency state graph that is only updated when strictly needed and is never stale.

MobX adds observable capabilities to existing data structures like objects, arrays and class instances. This can simply be done by annotating your class properties with the @observable decorator (ES.Next).

class Todo {
    id = Math.random();
    @observable title = "";
    @observable finished = false;
}

Using observable is like turning the properties of an object into a spreadsheet cells. But unlike spreadsheets, these values cannot just be primitive values, but also references, objects and arrays. You can even define your own observable data sources.

Further resources and documentation

https://mobxjs.github.io/mobx/getting-started-assets