DEV Community

Cover image for 💪 React + MobX Crash Course (in 5 pics!)
hexrcs for The Method Coder

Posted on • Updated on • Originally published at twitter.com

💪 React + MobX Crash Course (in 5 pics!)

Originally posted on Twitter as a thread: https://twitter.com/hexrcs/status/1201593792417144833

State management in React apps can be a hard thing to do.

Are you having a hard time wrapping your head around React state management, and getting tired of writing boilerplate for Redux?

Let's check out MobX - everything becomes so simple and effortless 😃

👇 Here's a 5-minute React + MobX crash course for you! 🥳

1 - MobX Concepts

MobX is a "reactive" state management library.

We directly mutate the state. Because we use MobX to observe and track mutations, the UI will be auto-updated, like cell updates in Excel. Network requests can also auto-send when conditions are met.

Everything is automatic!

MobX Concepts

2 - Decorator and observable

We normally use the decorator syntax to mark fields in a class "MobX observables" - easy to use or read. This way, normal JS stuff gets "enhanced" (eg. a JS number becomes an observable that can be tracked).

Grouping state logic in a "store" also makes our code more modular.

Decorator and observable

3. Action and Computed

In addition to @observable, we also have:

@computed - derived state from other observable/computed that can be used just like observables. Getter syntax is required. The derivation is automatic.

@action - batched state mutations. Reactions will only be triggered by the update when the action completes.

Action and Computed

4. Reactions

We can use autorun() or when() to watch observables and perform effects when there's update

autorun() takes a callback and runs it each time any observable used in it gets updated. (Remember to do the clean-up!)

when() only runs the callback once, when a condition is met.

Reactions

5. Using MobX with React

mobx-react binding lets us use MobX with React without writing autorun functions to rerender components.

We use @observer as a decorator to a class component, or HoC wrapping a function component. This creates an observer component that tracks observables needed during render, and auto rerenders whenever an update is observed.

Using MobX with React

Summary

And that's it, everything you need to start using MobX effectively. Pretty effortless, isn't it? 😃

If you are curious how MobX works under the hood, check out this amazing talk "Reinventing MobX" by Max Gallo.

Credits

Thank you so much Michel Weststrate for creating this amazing library, and helping to review this crash course! 🙌

(Thread crash course format inspired by Chris Achard 😁 Check out his excellent React/Redux, Git crash courses!)


While you are still here, if you've got 13 more minutes and are interested in learning the new hot framework Svelte, I've also got a crash course with companion videos here 👉 Svelte Crash Course 🔥

I've also got another GraphQL Crash Course 🔥 👈 Check it out!

 

Like this post?

I'll be posting more on Twitter: @hexrcs
You can also find me at my homepage: xiaoru.li

Top comments (11)

Collapse
 
fly profile image
joon • Edited

Wasn't really bothered to study MobX because I'm so accustomed to Redux, will definitely read again when I get the chance to :) I can tell that you tried very hard to make it as easy to read as possible. Great work, and thank you for the post!

Collapse
 
fantasticsoul profile image
幻魂

Hi, if love redux, I strongly recommend you have a try with concent) , which is born for build large scale and high performance react app.

here is online demos:
js ver: codesandbox.io/s/concent-guide-xvcej
ts ver: codesandbox.io/s/concent-guide-ts-...
function component and class component share business logic code easily, including their life-cycle methods.

Collapse
 
hexrcs profile image
hexrcs

Thank you for the kind words :) Really glad you've found it useful!

Collapse
 
fantasticsoul profile image
幻魂

Hi, I recommend you have a try with concent) , which is born for build large scale and high performance react app.

here is online demos:
js ver: codesandbox.io/s/concent-guide-xvcej
ts ver: codesandbox.io/s/concent-guide-ts-...
function component and class component share business logic code easily, including their life-cycle methods.

Collapse
 
hexrcs profile image
hexrcs • Edited

Hey, looks like a cool project!

One thought: I'm sure it can gain a lot more traction if the docs have an English version. (Maybe create an Issue on GitHub for this and label it "good first issue" or something?)

In fact I just came across this post on how to promote OSS Projects, check it out! => dev.to/zenika/open-source-promotio...

Collapse
 
fantasticsoul profile image
幻魂

thx for your reply, en doc is preparing(my en is not good, so it may be ready in next year)......
Concent is quite new and I only just posted a article a couple of days before to introduce Concent.

I believe I can benefit from 【Open source promotion】,thx a lot .

Thread Thread
 
hexrcs profile image
hexrcs

Try opening an issue for the translation work, I'm sure there are people willing to help!

Thread Thread
 
fantasticsoul profile image
幻魂

thank you for your suggestion, I have opened an issue: github.com/concentjs/concent/issues/4, hope some can help me.

Collapse
 
aprindev profile image
AprinDev

thank you , its greate, but you know ? i think redux is better ....

Collapse
 
hexrcs profile image
hexrcs

Everyone has their own opinion 😉

I'm making a new crash course on MobX State Tree, which is a bit like Redux but with all the benefits of MobX, a healthy mix of both worlds. You might find it interesting if you check back in two weeks! 😃

Collapse
 
deadcoder0904 profile image
Akshay Kadam (A2K)

Did u come around making MST?

I’m confused about which one to choose now. I have 3 main contenders - MobX, MST & Overmind :)