Async Action with MobX

This article assumes you have at least a basic understanding of React and Mobx. If not, check out the first part of this article that introduces MobX and its application in react. In the previous articles, we built a simple blog app with React and MobX without any interaction with external APIs. In this article, we will be interacting with a mock server for fetching, creating, updating, and deleting our posts. Before going further, let’s first understand what asynchronous actions are and what they do.

What are Async Actions?

The default behaviour of a function call is synchronous - when the function is called, the action is performed before the code continues running. Asynchronous actions are non-blocking code - when they are called, it doesn't disrupt the flow of the code. Every process continues as expected, except processes that are dependent on the function.

This can be useful when interacting with external APIs that could take a while to be fetched due to server distance, network, size of response, and different other factors. If operations like this are run synchronously then our application will freeze until a response is gotten. But when functions or calls are handled asynchronously, it makes the running process of the application smooth.

Blog App with Async Actions

Here is a link to the starter files. It is a React app with the application state managed by MobX. To demonstrate how the asynchronous action is handled in MobX, our blog app will be interacting with a mock server called json-server. The json-sever allows us to carry out basic CRUD operations without setting up an actual server. Here is what our app homepage component looks like currently

import React, { useEffect, useState } from "react"
import { Form } from "../../common/form"
import { observer } from "mobx-react-lite"
import blogStore from "../../store/blogStore"
import { PostList } from "./components/Posts/PostList"
 
export const Home = observer(() => {
 const posts = blogStore.allPosts
 
 const createAction = (data) => {
   blogStore.addPost(data)
 }
 
 return (
   <div className="container w-50 p-3">
     <div className="pt-3 pb-5">
       <Form buttonText="Add Post" submitAction={createAction} />
     </div>
     <div>
       <div className="card">
         <h2 className="card-header p-2">Latest Posts</h2>
         <PostList posts={posts}/>
       </div>
     </div>
   </div>
 )
})

Setting up the json-server

Before proceeding, let us set up the json-server. Run the command npm install json-server to install the json-server. Next, we create a db.json file in our root folder. This will serve as our mock database; the dummy database that `json-server` will interact with. Once this is done we can start the server with the command json-server --watch db.json. Before proceeding, we will need to update our package.json start scripts. The json-server runs on a default port 3000, in order not to cause conflicts with react, we would update the port on which React runs. Our script would look as below

"scripts": {
   "json-server": "json-server --watch db.json",
   "start": "PORT=3001 react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
 },

With this setup, we can run the json-server and the React app on different terminals. We will also have a global variable to serve as a base URL for our json-server within the blogStore.

1
2
3

const baseUrl = "
http://localhost:3000
"

Fetching Posts

To make requests to the server, we will be making use of the axios package which can be installed with the command npm install axios.

Once the json-server is configured, we can navigate to the components/store/blogStore.js to update the method for fetching posts; allPosts. It is currently a MobX computed method and looks like this

...

 constructor() {
   makeObservable(this, {
     posts: observable,
     addPost: action,
     deletePost: action,
     findPostById: action,
     allPosts: computed,
   });
 }
 ...

 get allPosts() {
   return this.posts
 }

 ...

Making it async we have

...

  constructor() {
   makeObservable(this, {
     posts: observable,
     addPost: action,
     deletePost: action,
     findPostById: action,
     allPosts: action,
   })
 }
 ...
 async allPosts() {
    if (this.posts.length < 1) {
      const res = await axios.get(`${baseUrl}/posts`);
      runInAction(() => {
        this.posts = res.data.reverse();
      });
    }

    return toJS(this.posts);
 }

 ...

We add the async keyword to the allPosts method and then set it as an action in the makeObservable. Within this method, we are fetching all posts from our server, and setting the response data to the posts state. Note the post state is been mutated in the runInAction method from mobx. Then with the toJS method from MobX, we are returning its value.

Now that the allPosts method is asynchronous, we need to update the way it is been called in the Home component.

So the Home component will be updated to this

import React, { useEffect, useState } from "react"
import { Form } from "../../common/form"
import { observer } from "mobx-react-lite"
import blogStore from "../../store/blogStore"
import { PostList } from "./components/Posts/PostList"
 
export const Home = observer(() => {
 const [state, setState] = useState({
   posts: [],
   isLoading: true,
 })
 
 const createAction = (data) => {
   blogStore.addPost(data);
 }
 
 useEffect(() => {
   blogStore.allPosts().then((res) => {
     setState({ isLoading: false, posts: res });
   })
 })
 
 return (
   <div className="container w-50 p-3">
     <div className="pt-3 pb-5">
       <Form buttonText="Add Post" submitAction={createAction} />
     </div>
     <div>
       <div className="card">
         <h2 className="card-header p-2">Latest Posts</h2>
         <PostList posts={state.posts} isLoading={state.isLoading} />
       </div>
     </div>
   </div>
 )
})

Unlike the previous method of calling allPost, we introduced a component state and a useEffect. Since the allPosts method is now asynchronous, the Home component has to react to a delay in the update of the Mobx state. Initially, when the page renders it fetches the static state and updates immediately but since this is asynchronous, it won’t see any value and return empty posts and even when the post is updated, there would be no reaction to the update hence the reason for introducing useEffect.

We introduced a local state in the component with properties posts and isLoading, the value of isLoading set to true - this is needed while we wait for the response from allPost so we can display a loading interface for the user. When the posts are available, we set posts to the response received, making them visible on the UI. All of this is handled in the useEffect so when there is an update, our component can take note of the update and update the UI.

Creating, Updating and Deleting a Post

Let's make more actions asynchronous and then the rest can be practised by you. The addPost method is a good place to proceed with. Initially, we make use of unshift when creating a new post, but to persist it with the db.json, we have to make a post request to the mock server. The same goes with the update and delete where we update values at index and remove at index respectively. The initial method looks like this

import { makeObservable, observable, computed, action } from "mobx"

class BlogModel {
  posts = []

  constructor() {
    makeObservable(this, {
      posts: observable,
      addPost: action,
			updatePost: action,
      deletePost: action,
      findPostById: action,
      allPosts: computed,
    })
  }
  getPost(id) {
    return this.posts.find((post) => post.id === parseInt(id))
  }
  addPost = (post) => {
    this.posts.unshift(post)
  };
  
updatePost
({ id, title, body }) {
    const post = this.getPost(id)
    if (post) {
      post.title = title
      post.body = body
    }
  }
  deletePost = (id) => {
    const index = this.posts.findIndex((post) => post.id === id)
    if (index > -1) this.posts.splice(index, 1)
  }
  get allPosts() {
    return this.posts
  }
}

const blogStore = new BlogModel()
export default blogStore

After updating we have

...
addPost = async (post) => {
    const res = await axios.post(`${baseUrl}/posts`, {
      title: post.title,
      body: post.body,
    });
    runInAction(() => {
      this.posts.unshift(res.data);
    });
  };
  updatePost = async ({ id, title, body }) => {
    console.log(id, title, body);
    const post = this.getPost(id);

    await axios.put(`${baseUrl}/posts/${id}`, {
      title: title,
      body: body,
    });

    if (post) {
      runInAction(() => {
        post.title = title;
        post.body = body;
      });
    }
  };
  deletePost = async (id) => {
    await axios.delete(`${baseUrl}/posts/${id}`);
    runInAction(() => {
      const index = this.posts.findIndex((post) => post.id === id);
      if (index > -1) this.posts.splice(index, 1);
    });
  };
 ...

They all use Axios to interact with the json-server. To leverage the power of MobX, they update the local state for MobX to render the posts without having to re-fetch. The way these methods are called does not change since we react to changes in the state within the Home component’s useEffect. Every change each of these methods makes reflects in the state asynchronously. You can find a link to the finished file here.

Conclusion

The is no limit to how MobX could be used. Its speed and simplicity make it stand out amongst other state management libraries. It's all up to you to decide how you want to leverage its features.

We have covered the basics of MobX and asynchronous actions. Next, we will be diving deeper into the world of MobX and discussing theories and its working principles to help us fully understand what makes MobX what it is. See you next time 🙂.

ReactAsync Action with MobX