Mobx and React intro: syncing the UI with the app state using observable and observer

  • Our actions now consist of simple mutations to our observable state.
  • Exploit the separation of concern by moving all the state out of the components into a separate store or state.
  • Even more important is that we now have established a separation of concern between the observable state and the component that reacts with.
  • There is state marked with observable, and there are components which automatically derive from it, marked by observer.
  • MobX is a general purpose FRP library that provides the means to derive, for example, a React based user interface automatically from the state and keep it synchronized.

Read the full article, click here.


@kentcdodds: “”Mobx and React intro: syncing the UI with the app state” on @eggheadio by @mweststrate #eggheadADay 🆓 #ReactJS ⚛”


Applications are driven by state. Many things, like the user interface, should always be consistent with that state.
[MobX](https://mobxjs.github.io/mobx) is a general purpose FRP library that provides the means to derive, for example, a React based user interface automatically from the state and keep it synchronized.

The net result of this approach is that writing applications becomes really straight-forward and boilerplate free.


Mobx and React intro: syncing the UI with the app state using observable and observer