In the first part of this series, we learned the basics of MobX and went on to build a blog app with react and MobX. MobX is a state management library, and in this article, we will be introducing the MobX hook APIs.
What is a MobX hook?
MobX hook gives us the ability to use MobX with the functional programming paradigm. They enable us to keep the functionality of MobX without having to use classes.
Fundamentally, using Mobx hooks within React components requires 2 APIs:
useLocalObservable - We use this to create the MobX store. It holds information about the state and actions used by the state. useLocalObservable is the replacement for the makeObservable mobX API we used in the first part of this series.
Observer - As demonstrated in the first part of this series, the observer allows a React component to keep watch on the state in real-time.
Building a blog app with Mobx Hook
We have a blog app in the starter file and we will add MobX hook APIs to the blog app. In doing this, we set up MobX to manage the state within our component, and with the help of React Context, we would manage the app state globally.
Setting up the Local Store
Starting with the local state management, we would dive straight into component/Post/index.tsx. This page renders the form for creating posts and the lists of posts in the state. The component should look something like this.
Next, we run the command npm i mobx-react or yarn add mobx-reactto install mobx-react. Then, we import the useLocalObservable hook and include the store in the component. Our post also needs an IBlogPost Interface
Now we can use the store variable to interact with our component. We proceed to update the handleSubmit to create a post with the createPost action.
When you start up the app, and create a post, you notice that the page does not update. However, if you log the posts within the createPost method, you would notice the post is updated but does not reflect in the UI.
To fix this, we would import Observer from mobx-react. The Observer takes in one value, a function that returns the HTML to be rendered on the page.
Now that the Observer is added to watch the component for changes, our app will work as expected. You can find the complete file for the MobX local strategy setup here.
Making MobX Store Available Globally in React
Though not a good practice, we will make the store available to all components in our app just to help us see MobX in action. First, we will create a folder within the components folder called the store. The store will house two files, this includes the BlogStore.ts and the BlogStoreContext. We will be updating the BlogStore.ts file first, and with it, we would return only the object properties that describe the state. We would also add a couple of methods that could be useful for our blog app.
To enable us use this store globally in the app, we would wrap our useLocalObservable in a React context Provider. This also has to be done since a react hook can only be called in a React functional component. So in our BlogStoreContext, we would have
Above, we are exporting the BlogStoreProvider and the useBlogStore. The BlogStoreProvider creates a store with the useLocalObservable and returns the store in a React context. The useBlogStore is basically for a cleaner code, so we don’t repeat its content everywhere the store is needed.
Now that the store and context are set, we can integrate our store with our app components. This means that we can replace the local store with the useBlogStore hook. Let’s start with the component/Posts/index.
A link to the finished app can be found at the end of the article. If we start up the app now, the app should work as expected. Let's proceed to add one more state action to show mobX in action.
This calls the totalLikes method in our state and returns the number of likes our blog posts has gotten in total. There is also a like button already created in the BlogCard Component to update the likes. So we can add this under the list of posts
Now when we click the like button on any created post, the total likes increase. Also, when we delete a post, the number of likes accumulated by that post is deducted from the total likes and is updated in the UI automatically. Here is a link to the finished code
In this article, we covered the MobX hooks. We talked about the two major APIs, useLocalObservable and the Observer. We also covered how to manage application states locally and then globally with the React context. Then we applied MobX hooks in a blog application. The next part of this series will focus on performing asynchronous actions with MobX. Our blog app will be making requests to an external API, hence the need for async actions. See you soon 😉
Mid Software Engineer
Hameed Damee is a software engineer at Factorial working on the Payroll Core Team. He has a passion for creating solutions that change the world around him. In his spare time, he loves travelling and experiencing new places.
Liked this read?Join our team of lovely humans
We're looking for outstanding people like you to become part of our team. Do you like shipping code that adds value on a daily basis while working closely with an amazing bunch of people?