4
\$\begingroup\$

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
        })
    );
};
\$\endgroup\$
1
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.