State management with MobX and React

Christian Nascimento — Fri, 22 May 2020 21:30:09 +0000

One of the good things I find on Linkedin is the sharing of ideas, projects, and learning by many devs. I miss transmitting my knowledge more simply and directly. So, I took the time to pass on some of my knowledge. There will be more short articles with examples.

I'll start by sharing a little bit about MobX.

What is MobX?

MobX is a library for state management just like Redux, which means that we can use it to either manage local or global states using Provider for example.

Roughly speaking, MobX is based on observables, actions, and reactions. That is, every action performed generates a reaction, which seeks an observable and then updates it.

Remember that it is not only exclusive for use with React, but there are also versions for other types of technology, for example Flutter.

At the end of this article I leave a link to a small example, created in CodeSandbox, of an implementation using MobX with React.

A brief explanation for the stores.

Actions: When we want to update a state;
Observables: Any element here is notified when it has some kind of reaction to a state.
Computed: When we want to return a calculation, type excel formulas.

The example

Resources

MobX
Mobx With React

I hope it helps those who want to find a simpler alternative to be implemented than Redux.

Cheers ;-)

DEV Community: Christian Nascimento

State management with MobX and React

What is MobX?

A brief explanation for the stores.

The example

Resources