React Native is an open-source mobile application framework that is used to develop an application for android & iOS from one code. In this blog, we will discuss how to handle API calls with MobX.
MobX — An Introduction
MobX is a state management tool that helps developers to manage app states in simple and appropriate form. MobX works in a cyclic process in which there are 3 key components:
- Observable — An object or anything which can be observed for changes. Observables represent the reactive state of the system.
- Action — These are the methods by which we mutate the observables. Instead of mutating them directly, we can use actions that will add semantic meaning to the observables.
- Reaction — These are the observables of the system which will observe the Observables and will be notified when the observables are changed.
Why we use MobX?
There are many reasons to use MobX.
- Quick implementation
- Easy to understand
- Less code
- Optimal rendering
Let’s start with an example
In this example, we develop a react native app with functional components. The below is the directory structure for our app. The entry point of our app is App.js.
First, we need to add some dependencies for this example.
yarn add mobx mobx-react @react-navigation/native @react-navigation/stack react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view axios
For iOS we need to install pods so put them below in your terminal,
cd ios && pod install && cd ..
for this example, I have used https://reqres.in/api/users?page=1 API.
Next, I have created
useStore.js a file for the MobX store. In this file we add
action . I have used three
observable and one
action as shown in the following code.
usersis used for users list.
pageis used for the current page.
total_pagesis used for a total number of pages.
After that, I have made a method for API call that returns users list and we store that data into
users list observable, also we store total page number in
total_pages . In the below code, you show that
callForUsers method and
getUsersList action. also, you get the basic logic of this example. First I check we need to call API again or not. If need then I check the data on the next page is available or not. If the next page is available then we call API and add data into
Following that, I have export our
usersStore into common store files for easy access.
Next, I have created a navigation file, That contains our screens.
Now, In this step, we add our navigation and MobX Provider.
Next, I have created two screens.
Usersfor display users list.
In this screen, I have added FlatList to display the list of users on the bottom of FlatList I have added
LoadMoreButton. This button displays the default
LoadMoreText if API has no more data than it is the display
No More DataText. When the screen launch then first call the user's API and shows the list of users.
Now you would ask me a question why I’m using
observer are used for re-render component on the value change of
observable variables which are in
In the below code, you show the getUsers method which is called on
useEffect . On ListItem Tap I have navigated to the next
UserDetails screen with the user id.
UserDetails for display particular user details on tap of
In this screen, I have to get the user id from the route and find the particular user details and display that user's details.
This final step completes the app that we were supposed to build and this app can be extended and evolved up to a great extent.
Here are some of the screenshots of the Application:
So far, we had implemented the MobX with API example and handle the state in our app. And also we learned how we can use this stored state on all screens.
Hope you like the article, and find useful information from this, If you have any query you can leave a comment also don’t forget to do some clap below.
Keep Learning Happy Coding :)