I am new to react redux and facing a strange problem while working on my project. I have a class named ApiUtils.js which has some set of functions to handle API realted calls.
import axios from 'axios';
const ErrorResponse = {
data: {
message: 'Something went wrong, please try again'
}
};
class ApiUtils {
request = null;
baseUrl = null;
defaultTimeout = 0;
constructor(baseUrl, defaultTimeout) {
this.baseUrl = baseUrl;
this.defaultTimeout = defaultTimeout;
}
setAxiosConfig = (isLogin = false, token = '') => {
// Create a Unauthorised axios Instance
let headerDetails = {
'Content-Type': 'application/json'
};
if (isLogin) {
headerDetails = {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
};
}
if (token) {
headerDetails = {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`
};
}
this.request = axios.create({
baseURL: this.baseUrl,
headers: headerDetails
});
};
post = async (url, body, requestTimeout = this.defaultTimeout) => {
let response = null;
try {
response = await this.request.post(url, body, {
timeout: requestTimeout
});
return response;
} catch (ex) {
if (ex.response && ex.response.data && ex.response.data.message) {
throw ex.response;
} else if (
ex.response.status === 409 &&
ex.response.data.error === 'Email Id already exist'
) {
throw ex.response.data;
} else if (
ex.response.data.status === 401 &&
ex.response.data.error === 'Exceeded Reset Passwords Attempts'
) {
throw ex.response.data;
} else if (
ex.response.data.status === 401 &&
ex.response.data.error === 'User type does not match'
) {
throw ex.response.data;
} else {
if (
ex.response &&
ex.response?.data &&
ex.response?.data?.data?.message &&
ex.response?.status === 408
) {
throw ex.response;
} else {
// if error response not defined
// ErrorResponse.data.statusCode = ex.response.status
throw ErrorResponse;
}
}
}
};
export const AuthExternalApiUtils = new ApiUtils(
process.env.REACT_APP_EXT_BASE_URL,
process.env.REACT_APP_API_TIMEOUT
);
export const WsApiUtils = new ApiUtils(
process.env.REACT_APP_WS_API_ROOT,
process.env.REACT_APP_WS_API_TIMEOUT
);
export default new ApiUtils(process.env.REACT_APP_API_ROOT, process.env.REACT_APP_API_TIMEOUT);
I have a 2 objects of this ApiUtils class
export const AuthExternalApiUtils = new ApiUtils(
process.env.REACT_APP_EXT_BASE_URL,
process.env.REACT_APP_API_TIMEOUT
);
export const WsApiUtils = new ApiUtils(
process.env.REACT_APP_WS_API_ROOT,
process.env.REACT_APP_WS_API_TIMEOUT
);
export default new ApiUtils(process.env.REACT_APP_API_ROOT, process.env.REACT_APP_API_TIMEOUT);
Now if I update the variables of any one of the above the other one has the same value. For example: if I update the baseUrl
of WsApiUtils
with https://xyzbaseurl.com/
and do console.log(AuthExternalApiUtils.baseUrl)
it also has the same value.
Why this is happening? is this an expected behavior or I am doing something wrong here.