7 tips of using MobX – Huiseoul Engineering

7 tips of using MobX  #javascript #react #mobx #reactjs

  • These are the very basic building blocks of MobX:observable: is the data that you are expecting to changeobserver: is a component that you want to be re-rendered depending on the observable datacomputed values: are functions returning values based on calculation of observable valuesreactions: many different types of functions that can be executed based on observable values2.
  • In large applications this might cause confusion and make it hard to track down where the data are being changed.Strict mode will give you peace of mindSo MobX provides a strict mode where you can only change your data inside of functions marked as actions can change observable values.In strict mode, only action functions can change observable values5.
  • MobX document suggests:one store for app-wide UImultiple stores for each domainStore states in storesIt means that you might want to have UiStore or AppStore for your app-wide, UI data, and other domain stores for each of your domain like UserStore, ProductStore, BrandStore, etc.7.
  • Having MobX, and introducing new concepts and using separated stores might get your app overly-complicated otherwise simple react components talking to each other.So if you start from scratch you might try to solve the problem of state management without MobX first then start to use it if you see the clear benefit for all of your colleagues.Even after introducing MobX in your app, consider using local states for simple view-only states like isLoading or isDisabled.
  • It might be better solution than MobX if you are working with explicitly time-based data among other situations.Redux is a predictable state container for JavaScript appsHappy coding!

MobX is a convenient tool that you can use in React projects to manage states across components. Here are 7 tips we have learned along the way we have built our app at Huiseoul using MobX for our…

@ReactDOM: 7 tips of using MobX #javascript #react #mobx #reactjs

7 tips of using MobX

MobX is a convenient tool that you can use in React projects to manage states across components. Here are 7 tips we have learned along the way we have built our app at Huiseoul using MobX for our React and ReactNative applications.

1. Get the concepts right

While many concepts in MobX are straight forward to understand, it will be helpful if you can draw a whole picture before you dive in. These are the very basic building blocks of MobX:

2. Use the right reactions

There are a few reactions you can use for your observables — they will react differently or you can delicately adjust when designated functions should be executed:

3. Use reactions with names

The error messages that you see that caused inside of MobX might not be too useful to track down your bug since they will be no information about how it was raised:

So some MobX reactions provides options to define name of your reactions upon creation so that you can easily pin-point what error you are looking at.

4. Use it in Strict mode

By default observable values in MobX can be changed in anywhere in your application. In large applications this might cause confusion and make it hard to track down where the data are being changed.

So MobX provides a strict mode where you can only change your data inside of functions marked as actions can change observable values.

5. Use it with decorator — TypeScript for bonus

You can use MobX without ES2015 features but if possible, use MobX with decorators — it is not the stable stage at the moment but your code will look much cleaner and easy to distinguish which is observables and which are not.

Bonus point if you use TypeScript(or any other type system) — TypeScript goes well with MobX: MobX is being made with TypeScript and fully supported for its types to be used in your application.

6. Structure it with stores

To logically group your observable data you might need more than one store in your app. MobX document suggests:

It means that you might want to have UiStore or AppStore for your app-wide, UI data, and other domain stores for each of your domain like UserStore, ProductStore, BrandStore, etc.

7. Don’t use it

It might not be a javascript tech writing without some controversial topics so here is mine. You can go a long way without using any stores for simple data flow. Having MobX, and introducing new concepts and using separated stores might get your app overly-complicated otherwise simple react components talking to each other.

So if you start from scratch you might try to solve the problem of state management without MobX first then start to use it if you see the clear benefit for all of your colleagues.

Even after introducing MobX in your app, consider using local states for simple view-only states like isLoading or isDisabled. If they do not need to be shared with other components they might belong to your local component states. Although I see some cases where developers choose to store all states inside stores for consistency.

Also consider Redux, too. Redux is being chosen by many developers to be used with React and ReactNative for state management. It might be better solution than MobX if you are working with explicitly time-based data among other situations.

Happy coding!

7 tips of using MobX – Huiseoul Engineering