Simple State Management With MobX and React

A look at how to use MobX to manage state in your React applications.

Matthew Brown
Nov 18, 2020 · 4 min read
Made by the author in Canva

As React developers we have many options for how to manage state in our applications. That is one of the nice things about React in that it is relatively unopinionated about how you do most things with state management being one of those where you have the freedom to choose what suits your application the best.

If you have a relatively small application that has a relatively small amount of data or state that is shared across different components then you most likely can get by with just using Context which is built into React. If your application is bigger and shares state across components then you would want to consider something more like Redux or MobX.

I have built many Redux applications and it works great for state management, but it does have its drawbacks which are that you find yourself writing a lot of boilerplate code and there is a relatively high learning curve. Both of these drawbacks are selling points for MobX. There is relatively little boilerplate code and in my opinion, it is much easier to pick up how to use it properly.

In this article, we will be building a simple issue tracker application to illustrate how to use MobX in an application. Now that we’ve introduced why we would choose MobX let’s jump into more details about how it works.

Screenshot by the author

MobX Concepts

These are the basic concepts to understand before jumping into MobX:

  • An observable is a field that is tracked in state.
  • An action is a function that updates an observable.
  • A computed is a value derived from the current state and updates once one of the values it depends on gets updated.

That’s all you really need to understand before jumping in. As I said earlier the learning curve for MobX is relatively low. So now that we have that out of the way let’s jump right into the code example to have a closer look at how MobX works.

MobX Application

The simplest way to learn anything is to build something with it. We will build a simple issue tracking application that uses MobX for a data store. We will need to build a form for adding new issues and also a list for displaying all of the current issues.

We will create a new application with Create React App to kick things off. Run the following command in a terminal to get started.

create-react-app mobx-issue-tracker

After our new project finishes generating we will need to install a dependency for MobX through npm. Run the following commands in a terminal to install those and start running the application locally.

cd mobx-issue-tracker
npm install --save mobx mobx-react
npm run start

The first piece of code is we will create a new Context to share our MobX store in the application. Create a new file called IssueStore.js and add the following code.

Next, we will create the MobX store for tracking the issues in the application. Create a file named IssueStoreContext

This is where our MobX code comes into play. We have examples of each of the concepts we discussed in the previous section of this article. The issues array is an example of an observable. The function addIssue and removeIssue are actions. Then lastly the getters issueCount and completedIssueCount are both examples of computed values.

If you’ve used Redux before it’s easy to see the much smaller amount of boilerplate code necessary when setting up a store in MobX. In my opinion, this code is also much simpler to understand and reason about than you would typically see in a Redux application.

Next, we can build the two components we need to interact with the store we just created. We will start with the form component for creating new issues. Create a new file called IssueForm.js and add this code.

Here we are simply collecting a few data points and then we call store.addIssue() to add a new issue to the store.

We will also need a list component to view all of the current issues. Create a new file called IssueList.js and add the following code to it.

Notice that any components that will need to update based on changing values in the store will need to be wrapped in the useObserver hook. In this component, we are simply displaying the issue list from the store and also the computed values that are updated based on changes to that issue list.

Just one more set of code updates to add before calling this project complete. We need to tie all of this together in the App.js file and also add a few styles to the CSS.

That completes our code. Check out how this app functions in the screen capture below.

Screen capture by the author

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

Matthew Brown

Written by

I am the Director of I.T. at IN10T. My passions include software development, anything technology related, and cars.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Matthew Brown

Written by

I am the Director of I.T. at IN10T. My passions include software development, anything technology related, and cars.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store