Fetching data from API in JavaScript

Question

I'm using Axios to fetch data from an API, and don't know if this is the best way to deal with APIs in ReactJS or not. I want to know if anyone can suggest edits or something to make the code more efficient.

api.js

import axios from 'axios';
export const APIendpoint = axios.create({
 baseURL: 'https://1eb19101-0790-406f-90e0-ee35a2ff2d1f.mock.pstmn.io',
 timeout: 2000
});

matchesAction.js

import {FETCH_MATCHES} from './actionTypes';
import {APIendpoint} from '../api/api';
export const fetchMatches = () => dispatch => {
 const matchInstance = APIendpoint.get('/matches');
 matchInstance.then(response =>
 dispatch({
 type: FETCH_MATCHES,
 payload: response.data
 })
 );
};

Answer 1

It can be done in many ways based on your use case & code structure, but i feel this can be optimal way of structuring.

api/services/index.js

import axios from 'axios';
export {default as MATCHES_API} from "./services/matches.js";
export const CONFIG_API = axios.create({
 baseURL: 'https://1eb19101-0790-406f-90e0-ee35a2ff2d1f.mock.pstmn.io',
 timeout: 2000
});

api/services/matches.js

import CONFIG_API from "api/services";
const ERROR_MSG = "<generic message>";
export const matches = () => {
 return CONFIG_API.get("/matches").then(res => {
 // do some operations on data - if required 
 return {success: true, data: res.payload};
 }).catch(err => {
 return {success: false, message: ERROR_MSG || err.message};
 });
};

actions/matchesAction.js

import {FETCH_MATCHES} from './actionTypes';
import {MATCHES_API} from "/api/services";
export const fetchMatches = () => dispatch => {
 matches.then((response) =>
 const {success} = response;
 if (success) {
 dispatch({ type: FETCH_MATCHES, payload});
 } else {
 dispatch({ type: FETCH_MATCHES_FAILED}); /* or show notification */ . 
 }
 );
};

Let me know if this works out.