Introducing MobX Easy

I am happy to introduce to you a new library above MobX which will make your life with MobX easier! mobx-easy

After a while of working with MobX, you start seeing a few common patterns and abilities you don’t have out of the box. I have given mobx-state-tree a try but it felt for me like it removes MobX simplicity so I decided to try to keep it simple while adding few extra features.

Let’s take a dive into those features and explain each more detailed:

• wrapRoot
• removeRoot
• getRoot
• getEnv
• setter
• allObservable
• revertible
• addComputations
• addActions

wrapRoot + removeRoot

So in order to share the root and the environment across our used project, we first need to start it with wrapRoot that receives:

• RootStore property that can be a class or an object with an init function on it (it’s important so we can init the root in the library to pass it later on properly).
• env an object which can be anything you need to share across your project.
• wrapperName is optional and only needed u wish to use multiple roots.

Usually, it should be used on the initial project setup and then passed on to the app.

Also, you have removeRoot to remove the root if you need on app close, component unmount. It can be removed globally or by root name.

RootStore + wrapRoot example

getRoot

After we previously used wrapRoot on our project and now we are good to go we can use getRoot where ever we want! (in the project)

getRoot provides you the RootStore the instance created after you provided it to wrapRoot before, simply now instead of passing rooStore on every constructor and maybe keeping it in each class/object you can just call this function and get it.

calling getRoot

getEnv

The same as getRoot, getEnv provides you simple dependency injection and a way to share services/data/anything you want across the project.

calling getEnv

setter

As the name implies, @setter allows you to set a fast set function to any observable by passing it the name and default value if you want.

Can save a lot of time when you many observables and each one needs to have an @action function to every second @observable you use.

@setter usage

allObservable

This one helps you to avoid the need to write new param for every property you want to add, really helpful for big types used inside mobx class, just call @allObservable(), you can pass an array of properties to exclude.

imagine having to write @observable for each one

revertible

This one allows us to achieve optimistic UI updates easily, imagine you have something you want to update right away without waiting for a response from the server but suddenly you receive error and need to revert to the previous state… with @revertible you just call revert function on the class you added @revertible and pass it the prop name you wish to revert, or just call it as is and it reverts all of the props.

Using @revertible

addComputations + addActions

This last 2 are more complex and can help achieve reusability between similar functionality like stores and models and can help share this functionality across projects, basically, it just provides a way to re-use actions and computation between few classes with composition.

Okay, so that’s mobx-easy for now, until we find more stuff we can add or improve in the library :)

I’ve created an example project which shows all the functionality above:

Live Example: https://mobx-easy-examples.georgy-glezer.com/

Example Repo:

stolenng/mobx-easy-examples

mobx-easy Repo:

stolenng/mobx-easy

For any question, ideas on how to improve or adding stuff, feel free to contact me :)

9/20 Update

I’ve released an extensive course about MobX, Feel free to check it out it here:

MobX In Depth With React(Hooks+TypeScript)