The New Age Axios Setup: Separation of Concerns in React

However, as applications grow in complexity, it becomes necessary to organize code and adopt best practices for maintainability, scalability, and readability. In this blog post, we will explore a separation of concerns approach in React using Axios. We will demonstrate how to structure your code by leveraging abstraction layering and modularization techniques.

But before we dive into the details, let's briefly discuss Axios and its benefits.

Understanding Axios

Axios is a popular JavaScript library that simplifies making HTTP requests. It provides an easy-to-use API for performing GET, POST, PUT, DELETE, and other types of HTTP requests. Axios supports promises, allowing you to handle asynchronous operations elegantly using async/await syntax.

Some key benefits of using Axios include:

Simplicity:

Axios provides a simple and intuitive API for making HTTP requests, making it easy to get started.

1. Promise-based: Axios leverages JavaScript promises, enabling you to handle asynchronous operations in a more readable and efficient manner.
2. Interceptors: Axios allows you to intercept requests and responses, enabling you to modify or handle them globally.

Now that we have a basic understanding of Axios let's explore how to structure your code using separation of concerns.

Separation of Concerns in React

Separation of concerns is a software design principle that encourages splitting a program into distinct sections, each responsible for a specific aspect of functionality. In the context of React applications, this principle helps in organizing code, improving code maintainability, and making it easier to understand and modify.

When using Axios in a React project, it's beneficial to separate the concerns related to API requests and data management from the components themselves. This separation promotes code reusability, modularity, and testability.

To achieve this, we can follow a three-layered architecture consisting of:

Service Layer

The service layer encapsulates the logic for making API requests using Axios. It abstracts away the details of API endpoints, request configurations, and error handling. This layer allows us to centralize API-related code and reuse it throughout the application.

Here's an example of how a service layer using Axios can be implemented:

1
2import axios from 'axios';
3
4const API_BASE_URL = 'https://your.api-base.url'; // Replace with your actual API base URL
5
6// Fetch users from the API
7export const fetchUsers = async () => {
8  try {
9    const response = await axios.get(`${API_BASE_URL}/users`);
10    return response; // This will include the response data, status, and other information
11  } catch (error) {
12    // Handle or throw the error as needed
13    console.error('Error fetching users:', error);
14    throw error;
15  }
16};
17
18// Create a new user in the API
19export const createUser = async (user) => {
20  try {
21    const response = await axios.post(`${API_BASE_URL}/users`, user);
22    return response; // This will include the response data, status, and other information
23  } catch (error) {
24    // Handle or throw the error as needed
25    console.error('Error creating user:', error);
26    throw error;
27  }
28};
29
30// Other API service methods...
31

By centralizing API logic in the service layer, we can easily reuse these methods throughout the application, avoiding duplication and promoting code consistency.

Data Layer

The data layer acts as an intermediary between the components and the service layer. Its primary responsibility is to manage data retrieval, transformation, and caching.

In this layer, we consume the API service methods from the service layer and adapt the responses to suit the needs of our components. Additionally, we can implement caching strategies or handle complex data transformations specific to our application requirements.

Here's an example of a data layer module that interacts with the service layer:

1         // userData.js
2        import { fetchUsers, createUser } from './apiService';
3    
4        export const getUsers = async () => {
5          try {
6            const response = await fetchUsers();
7            return response.data;
8          } catch (error) {
9            // Handle error...
10          }
11        };
12    
13        export const addUser = async (user) => {
14          try {
15            const response = await createUser(user);
16            return response.data;
17          } catch (error) {
18            // Handle error...
19          }
20        };
21    
22        // Other data layer methods...
23       

In this example, we consume the fetchUsers and createUser methods from the service layer and return the transformed data to the components. We handle any potential errors within the data layer, allowing the components to focus solely on rendering and user interactions.

Component Layer

The component layer is responsible for rendering the UI and handling user interactions. It consumes data from the data layer and updates the data when required.

Components should be kept as lean as possible, with minimal business logic. They should mainly focus on rendering the UI, handling user input, and triggering actions when necessary.

Here's an example of how a component can consume data from the data layer:

1         import React, { useEffect, useState } from 'react';
2        import { getUsers, addUser } from './userData';
3    
4        const UserList = () => {
5          const [users, setUsers] = useState([]);
6    
7          useEffect(() => {
8            const fetchUsersData = async () => {
9              const usersData = await getUsers();
10              setUsers(usersData);
11            };
12    
13            fetchUsersData();
14          }, []);
15    
16          const handleAddUser = async (user) => {
17            await addUser(user);
18            // Refresh the user list or perform other actions...
19          };
20    
21          return (
22            <div>
23              <ul>
24                {users.map((user) => (
25                  <li key={user.id}>{user.name}</li>
26                ))}
27              </ul>
28              <button onClick={() => handleAddUser({ name: 'John' })}>
29                Add User
30              </button>
31            </div>
32          );
33        };
34    
35        export default UserList;
36       

‍

In this example, the UserList component uses the getUsers function from the data layer to fetch a list of users. It then renders the list of users and provides a button to add a new user, which calls the addUser function from the data layer.

By separating concerns and following the three-layered architecture, we achieve cleaner, more maintainable, and testable code. Changes to the API service or data layer won't affect the components, making it easier to refactor and scale the application.

Best Practices for Using Axios in React

Now that we have established the three-layered architecture and separation of concerns, let's delve deeper into some best practices and techniques for using Axios in your React applications.

1. Handling Post Requests with Axios

In modern web applications, making POST requests is a common requirement for sending data to the server. Axios makes it straightforward to handle POST requests using its post method.

1         import axios from 'axios';
2    
3        const postData = async () => {
4          const data = { name: 'John', email: 'john@example.com' };
5    
6          try {
7            const response = await axios.post('https://api.example.com/users', data);
8            console.log(response.data); // Data returned by the server after successful POST
9          } catch (error) {
10            console.error(error);
11          }
12        };
13       

‍

In this example, we use Axios to send a POST request to the server with the data object as the request payload. The post method returns a promise, and we use await to handle the asynchronous response.

2. Importing Axios in React Components

To use Axios in your React components, you need to import it. Make sure you have installed Axios as a dependency in your project before importing it.

1         import React, { useEffect, useState } from 'react';
2        import axios from 'axios';
3    
4        const ComponentName = () => {
5          // Component logic...
6        };
7       

By importing Axios directly into the components where you need it, you ensure that each component can handle its own data requests independently.

3. Using Async/Await for Asynchronous Operations

To leverage the full power of Axios, take advantage of JavaScript's async/await syntax when making API requests. This allows you to write cleaner and more readable code for handling asynchronous operations.

1         import axios from 'axios';
2    
3        const fetchData = async () => {
4          try {
5            const response = await axios.get('https://api.example.com/data');
6            console.log(response.data); // Process the data returned by the API
7          } catch (error) {
8            console.error(error);
9          }
10        };
11       

‍

By using async/await, you can avoid callback hell and write synchronous-looking code while still handling asynchronous operations gracefully.

4. Creating Custom Axios Instances

Axios allows you to create custom instances with specific configurations. This can be beneficial when you need different base URLs or headers for different parts of your application.

1         import axios from 'axios';
2    
3        const customAxios = axios.create({
4          baseURL: 'https://api.example.com',
5          timeout: 5000,
6          headers: { 'Authorization': 'Bearer YOUR_ACCESS_TOKEN' },
7        });
8    
9        export default customAxios;
10       

‍

With this custom instance, you can use the customAxios object to perform API requests, and it will automatically use the specified configuration.

5. Interceptors for Global Request and Response Handling

Axios allows you to intercept requests and responses using interceptors. This is useful for performing actions like adding headers to all requests or handling errors globally.

1         import axios from 'axios';
2    
3        // Request interceptor
4        axios.interceptors.request.use(
5          (config) => {
6            // Modify config before sending the request
7            config.headers['Authorization'] = 'Bearer YOUR_ACCESS_TOKEN';
8            return config;
9          },
10          (error) => {
11            // Handle request error
12            return Promise.reject(error);
13          }
14        );
15    
16        // Response interceptor
17        axios.interceptors.response.use(
18          (response) => {
19            // Modify response data before passing it to the calling function
20            return response.data;
21          },
22          (error) => {
23            // Handle response error
24            return Promise.reject(error);
25          }
26        );
27       

With interceptors, you can perform actions like adding authentication headers or handling common errors across all API requests.

6. Error Handling with Axios

Axios provides specific error objects for different types of errors that can occur during an API request. Handle errors gracefully to provide a better user experience.

1         import axios from 'axios';
2    
3        const fetchData = async () => {
4          try {
5            const response = await axios.get('https://api.example.com/data');
6            console.log(response.data);
7          } catch (error) {
8            if (error.response) {
9              // The request was made, but the server responded with a non-2xx status code
10              console.error(error.response.data);
11              console.error(error.response.status);
12              console.error(error.response.headers);
13            } else if (error.request) {
14              // The request was made, but no response was received
15              console.error(error.request);
16            } else {
17              // Something happened in setting up the request that triggered an Error
18              console.error('Error', error.message);
19            }
20            console.error(error.config);
21          }
22        };
23       

‍

By differentiating between different error types, you can provide more informative error messages and handle issues appropriately.

7. Handling Request Cancellation

In some cases, you might want to cancel an ongoing API request, especially if the user navigates away from a component before the request is completed. Axios supports request cancellation using the CancelToken.

1         import axios from 'axios';
2    
3        const source = axios.CancelToken.source();
4    
5        const fetchData = async () => {
6          try {
7            const response = await axios.get('https://api.example.com/data', {
8              cancelToken: source.token,
9            });
10            console.log(response.data);
11          } catch (error) {
12            if (axios.isCancel(error)) {
13              console.log('Request canceled:', error.message);
14            } else {
15              console.error('Error', error.message);
16            }
17          }
18        };
19    
20        // Cancel the request
21        source.cancel('Operation canceled by the user.');
22       

‍

By canceling ongoing requests, you can prevent unnecessary data fetching and improve the performance of your application.

8. Properly Cleaning Up Effects

In React, when using useEffect for making API requests or other side effects, it's essential to clean up after the component is unmounted. Otherwise, it may lead to memory leaks or unexpected behavior.

1         import React, { useState, useEffect } from 'react';
2        import axios from 'axios';
3    
4        const ComponentName = () => {
5          const [data, setData] = useState([]);
6    
7          useEffect(() => {
8            let isMounted = true;
9    
10            const fetchData = async () => {
11              try {
12                const response = await axios.get('https://api.example.com/data');
13                if (isMounted) {
14                  setData(response.data);
15                }
16              } catch (error) {
17                console.error(error);
18              }
19            };
20    
21            fetchData();
22    
23            return () => {
24              // Clean up on unmount
25              isMounted = false;
26            };
27          }, []);
28    
29          return <div>{/* Render component content */}</div>;
30        };
31    
32        export default ComponentName;
33       

By using the isMounted variable, we ensure that the state is only updated when the component is still mounted, preventing potential memory leaks.

9. Testing Axios Calls with Mocks

While testing React components that use Axios, you may want to mock the API calls to isolate component testing from external dependencies.

1         import React from 'react';
2        import { render, act } from '@testing-library/react';
3        import axios from 'axios';
4        import ComponentName from './ComponentName';
5    
6        jest.mock('axios');
7    
8        test('renders component and handles API response', async () => {
9          const mockResponse = {
10            data: [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }],
11          };
12          axios.get.mockResolvedValueOnce(mockResponse);
13    
14          let container;
15          await act(async () => {
16            const { container: componentContainer } = render(<ComponentName />);
17            container = componentContainer;
18          });
19    
20          // Perform assertions on the rendered container or component
21        });
22       

By using jest.mock('axios'), we mock the Axios module, and by using axios.get.mockResolvedValueOnce, we set the mock response for the API call. This way, the component can be tested without making actual API requests.

10. Managing Axios Instances with Custom Hooks

To further enhance code modularity and reusability, you can create custom hooks that wrap Axios calls and manage the API logic.

1         import { useState, useEffect } from 'react';
2        import axios from 'axios';
3    
4        const useAxios = (url) => {
5          const [data, setData] = useState([]);
6          const [loading, setLoading] = useState(true);
7          const [error, setError] = useState(null);
8    
9          useEffect(() => {
10            let isMounted = true;
11    
12            const fetchData = async () => {
13              try {
14                const response = await axios.get(url);
15                if (isMounted) {
16                  setData(response.data);
17                }
18              } catch (error) {
19                setError(error);
20              } finally {
21                setLoading(false);
22              }
23            };
24    
25            fetchData();
26    
27            return () => {
28              isMounted = false;
29            };
30          }, [url]);
31    
32          return { data, loading, error };
33        };
34    
35        export default useAxios;
36       

With this custom hook, you can easily reuse the API call logic in multiple components, reducing redundancy and promoting code consistency.

1         import React from 'react';
2        import useAxios from './useAxios';
3    
4        const ComponentName = () => {
5          const { data, loading, error } = useAxios('https://api.example.com/data');
6    
7          if (loading) {
8            return <div>Loading...</div>;
9          }
10    
11          if (error) {
12            return <div>Error: {error.message}</div>;
13          }
14    
15          return <div>{/* Render component content using 'data' */}</div>;
16        };
17    
18        export default ComponentName;
19       

By leveraging custom hooks, you can create a reusable interface for making API requests and handling responses.

Introducing WiseGPT

While Axios provides an excellent foundation for handling API requests, it's worth exploring additional tools and libraries that can enhance your development experience. One such tool is WiseGPT, a plugin for generating code for APIs directly into your React project.

WiseGPT offers several key benefits:

1. No Limit on Output Size: With WiseGPT, you can generate code for APIs of any size, accommodating large-scale projects with ease.
2. Mirrors Your Coding Style: WiseGPT generates code that matches your coding style, ensuring consistency and familiarity throughout your codebase.
3. Promptless: Unlike traditional AI models, WiseGPT does not require prompts. It understands the context of your code and generates relevant code snippets accordingly.
4. Auto-Created Models and Functions: WiseGPT automatically creates models and functions based on the provided collection of APIs, reducing manual effort and speeding up development.

With WiseGPT, you can eliminate the manual process of making API requests, parsing responses, and managing error handling for complex API endpoints. WiseGPT takes care of all these aspects, allowing you to focus on building features and delivering value to users.

To get started with WiseGPT, provide your collection of APIs, and let WiseGPT generate the necessary code for handling API requests. It seamlessly integrates with your React project, helping you save time and effort.

Conclusion

In this blog post, we explored the concept of separation of concerns in React applications, focusing on the use of Axios for handling API requests. By adopting a three-layered architecture, we can achieve cleaner, more modular, and maintainable code.

We discussed the service layer, data layer, and component layer, explaining their respective responsibilities and interactions. Separating concerns helps improve code organization, code reusability, and testability.

Additionally, we introduced WiseGPT, a powerful tool for generating code for APIs directly into your React project. With WiseGPT, you can streamline API-related code generation, eliminate manual tasks, and improve overall development productivity.

To experience the benefits of WiseGPT for yourself, give it a try and see how it can accelerate your React development process.

Remember, embracing separation of concerns and leveraging tools like WiseGPT can help you build robust and scalable React applications while keeping your codebase clean and maintainable. Happy coding!

Link to WiseGPTIn modern web development, handling API requests and managing data flows between components are essential tasks. One popular library that simplifies this process is Axios. It provides an elegant and straightforward way to make HTTP requests from a client application.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.