Sync the UI with the app state using MobX observable and observer in React

Share this video with your friends

Send Tweet

Applications are driven by state. Many things, like the user interface, should always be consistent with that state. 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.

Sofiya Tepikin
Sofiya Tepikin
~ 4 years ago

What is the difference then, between passing the store as prop, and using it directly from the closure?

Michael Freeman
Michael Freeman
~ 2 years ago

Downloaded the repo from: https://codesandbox.io/s/jj7rrm1q19

"Syntax error: Unexpected token (17:0)"

@observer class Counter extends Component {

••••••••••

Any ideas?

shraddha213408
shraddha213408
~ 2 years ago

I get this same error.Unable to resolve it.

Felipe Segall
Felipe Segall
~ 2 years ago

Probably you need to enable babel to parse the decorator syntax installing a plugin such as:

https://babeljs.io/docs/en/babel-plugin-proposal-decorators

I've just started this tutorial. But would try that.

Sung Kim
Sung Kim
~ 2 years ago

Downloaded the repo from: https://codesandbox.io/s/jj7rrm1q19

"Syntax error: Unexpected token (17:0)"

@observer class Counter extends Component {

••••••••••

Any ideas?

Seems like CRA doesn't support decorators. https://facebook.github.io/create-react-app/docs/can-i-use-decorators

As I tried your sandbox with old v1.x react-script, it works but not with v2.x