Simple State Management With MobX and React
A look at how to use MobX to manage state in your React applications.
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.
These are the basic concepts to understand before jumping into MobX:
observableis a field that is tracked in state.
actionis a function that updates an observable.
computedis 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.
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.
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.
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
removeIssue are actions. Then lastly the getters
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.
That does it for our introduction to MobX. Check out the full source code for the example on Github. Thanks for reading!
How to Build Awesome Tables With React Table
React Tables is the easy way to build tables with sorting, paging, CSV exports, and more.
Clean Up Your React Code With Custom Hooks
Clean up functional components with custom hooks.