5 Ways To Handle Rest API Request In React Using CRUD Functions

Rest APIs are the most commonly-used APIs by software developers in web development. Rest APIs are programming interfaces that work as a medium of communication between web apps. Rest can be used to access the data and features of various applications. REST is also used to define the API properties.

 

Here are a few steps you can use to handle Rest API Request in React development,

 

Use of Axios

 

Axios is an npm package that is used by various web applications to send an HTTP request to a web API.  Axios plays the same role in React APIs as well and thus it is used extensively by many developers.

 

The commands required to install Axios in React are,

 

npm install axios

 

Or

 

yarn add axios

 

The next step is to create a React component. React component is nothing but a chunk of code. Thus, before creating the component you need to import React and Axios libraries into your application. The commands required to import these libraries are,

import React from ‘react’;
import Axios from ‘axios’;

Thus after importing the libraries, the Axios method is used to generate Axios request which is depicted as follows,

axios({ method: 'http request method', url: 'Api url' });

The object in the above command is used as an argument. In the object, the request type that the HTTP request type method is set as well as API URL values are set.

 

Generate a GET request

 

Using the pattern of basic request we can generate a GET request in a similar pattern. The GET request is generated as follows,

const apiUrl = 'https://your-api.com/';
axios({ method: 'get', url: `${apiUrl}` });

In GET request, when the API receives the request and processes the request, the desired response is sent. The component will then handle the response and it also handles the data received before it can be further used in the application.

axios({
    method: 'get',
    url: `${apiUrl}`
}).then(response => {
    this.setState({
        posts: response.data
    })
});

In the above example, we have defined a key ‘posts’ in our state object and set it to an equal empty array. Axios responses are said to be nonsynchronous. Also, we need to handle the response generated and to do so we have used ‘then’ at the end of the request. In case we are using the redux object for state management, we need to use a ‘dispatch’ in the ‘then’ block, thus this will help us to store the response data in the redux object.

 

Generate a POST request

 

As soon as we submit the form a POST request is generated by the client machine and sent on the server for processing. The POST request is used to pass the data along with API requests. The data that needs to be posted in the database is obtained from the form.

class YourComponent extends React.Component {
    constructor(prep) {
        super(prep);
        this.state = {
            post: ''
        }
    }
    handleChange(a) {
        const {
            value
        } = a.target;
        this.setState({
            post: value
        });
    }
    handleSubmit(a) {
        a.preventDefault();
        const {
            post
        } = this.state;
        axios({
            method: 'post',
            url: `${apiUrl}/posts`,
            data: post
        })
    }
    render() {
        return ();
    }
}

In the above code example, the handle change function will update the component’s state, while the handle submit function will create our Axios request.

 

Generate a DELETE request

 

The functioning of the DELETE request is similar to the POST request. The DELETE request is associated with a button click event in the form.

class YourComponent extends React.Component {
    constructor(preps) {
        super(preps);
        this.state = {
            posts: [{
                id: 2,
                content: 'The first blog'
            }]
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(a) {
        a.preventDefault();
        const {
            id
        } = a.target;
        const apiUrl = 'https://your-api.com/';
        axios({
            method: 'delete',
            url: `${apiUrl}/posts/${id}`
        })
    }
    render() {
        const {
            posts
        } = this.state;
        return ( < div > {
            posts.map(post => ( < div key = {
                    post.id
                } > < p > {
                    post.content
                } < /p> < div > < input type = "button"
                id = {
                    post.id
                }
                value = "Delete"
                onClick = {
                    this.handleClick
                }
                /> < /div> < /div>))
        } < /div>);
    }
}

In the above code example, a ‘DELETE’ request is generated when the button is clicked thus enabling the handleClick function. As soon as the button is clicked, the ‘DELETE’ request is sent to the server thus resulting in deletion of the post in the database. The result to be reflected on the front- end is by generating a GET request and further passing it to the component’s state to update and reflect the desired changes.

 

Generate the request using JWT

 

JWT tokens are generally used to authenticate the users in the web-based applications. The token can be generated by sending a POST request to the configured API of the web application. After generating the token it is stored in an object and can be used when required.

 

Conclusion

 

The above tips will surely help you to handle your Rest API request using React. There are several other techniques available online which can help to make applications robust and reliable. Many organizations are choosing REST APIs to design their web applications as it can be easily deployed on any platform