Getting Started with React State Management with MobX 6

MobX is a simple state management solution for React apps.

In this article, we’ll look at how to use MobX 6 to add state management into our React apps.

Installation

To get started, we can install the MobX package by running:

yarn add mobx

with Yarn or:

npm install --save mobx

with NPM.

To use it with React, we also need the mobx-react-lite package.

To install it, we run:

npm i mobx-react-lite

We can add a script tag to load the MobX library from CDN.

The script’s URL is:

https://cdnjs.com/libraries/mobx

or:

https://unpkg.com/mobx/dist/mobx.umd.production.min.js

Simple Usage

After we installed the packages, we can use them to store global states of our React app.

For instance, we can write:

import React from "react";
import { makeObservable, observable, computed, action } from "mobx";
import { observer } from "mobx-react-lite";

class Count {
  count = 0;
  get doubleCount() {
    return this.count * 2;
  }
  constructor(count) {
    makeObservable(this, {
      count: observable,
      doubleCount: computed,
      increment: action
    });
    this.count = count;
  }

increment() {
    this.count++;
  }
}

const store = new Count(1);

const Counter = observer(({ store: { count } }) => {
  return <div>{count}</div>;
});

const DoubleCounter = observer(({ store: { doubleCount } }) => (
  <div>{doubleCount}</div>
));

const Incrementer = observer(({ store }) => {
  return (
    <div>
      <button onClick={() => store.increment()}>increment</button>
    </div>
  );
});

export default function App() {
  return (
    <div>
      <Incrementer store={store} />
      <Counter store={store} />
      <DoubleCounter store={store} />
    </div>
  );
}

to create the Count store and use it in our React app.

We have the count state in the Count class.

doubleCount is a state that’s computed from the value of the count state.

In the constructor, we have makeObservable function to make the count and doubleCount properties reactive states.

observable makes it an observable state.

And computed makes it a computed state, which means it’s a reactive state derived from one or more observable states.

Then we initialize the this.count class property to the value of the count parameter.

Next, we create the increment method to increment the count value.

Then we create a store from the Count class and initialize the count state to 1.

Next, we create the Counter component which gets the store.count value and render it.

We also have the DoubleCounter component to render the store.doubleCount value.

Next, we have the Incrementer component that gets the store from the prop and call its increment to increment the count value when we click the button.

We wrap all 3 components with the MobX observer function to make all 3 components watch the store state values.

Finally, in App , we add all 3 components and pass in the store so that when we click increment, we see both count and doubleCount update.

Conclusion

We can add state management to our React app with MobX easily.