ReactAsync Action with MobX
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
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
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
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
Making it async we have
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
So the Home component will be updated to this
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
We introduced a local state in the component with properties
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
After updating we have
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
useEffect. Every change each of these methods makes reflects in the state asynchronously. You can find a link to the finished file here.
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 🙂.