Handling Api calls using MobX | React native

Introduction

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:

1. Observable — An object or anything which can be observed for changes. Observables represent the reactive state of the system.
2. 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.
3. 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.

1. Quick implementation
2. Easy to understand
3. Less code
4. 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 observable and action . I have used three observable and one action as shown in the following code.

1. users is used for users list.
2. page is used for the current page.
3. total_pages is used for a total number of pages.

userStore.js (declare observable & actions)

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 users list.

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.

1. Users for 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 inject and observer ?

inject and observer are used for re-render component on the value change of observable variables which are in usersStore file.

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.

2. UserDetails for display particular user details on tap of UsersList item.

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:

Example Screenshots

Summary

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 :)

jaiminbhut/react-native-mobx-api-call