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!
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.
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.
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.
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.
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)
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!
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.
Thank you for the kind words :) Really glad you've found it useful!
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.
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...
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 .
Try opening an issue for the translation work, I'm sure there are people willing to help!
thank you for your suggestion, I have opened an issue: github.com/concentjs/concent/issues/4, hope some can help me.
thank you , its greate, but you know ? i think redux is better ....
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! 😃
Did u come around making MST?
I’m confused about which one to choose now. I have 3 main contenders - MobX, MST & Overmind :)