I'm new to react,I'm revamping my web application from angular to react. I've got stuck at this particular point. My application requires a token to perform API calls. when a token expires on a particular API call,I watch for the failure case and run a refresh token call,On the success of refresh token call i rerun that particular API. it was simple to implement in angular but i just can not figure out in react redux.
here is my angular code
var fetchAccessToken = function(successCallback,failureCallback){
if($cookies.get('aid')){
accountGetATAPI.save({
a_id : $cookies.get('aid'),
d_id : window.fingerprint.md5hash,
at : getAt(),
cl : "W",
rt : getRefreshToken(),
k_ey : getSecret()
},function (res) {
var at = res.data.at;
//console.log("server received token: " + at);
$cookies.put('at',res.data.at);
successCallback(res);
},function (res) {
failureCallback(res);
});
}
};
var fetchProfiles = function(successCallback,failureCallback,currentTry,maxTry) {
var aid = data["Account"]["_id"];
accountProfileFetchAPI.save({
a_id : getAccountId(),
tokn : getAt()
},function(res){
data["Profiles"] = res["data"]["Profile"];
//200
successCallback(res);
},function(res){
//not 200
if(res.status == error_constants.TOKEN_EXPIRE_CODE) {
fetchAccessToken(function(){
if(currentTry < maxTry) {
fetchProfiles(successCallback, failureCallback, ++currentTry, maxTry);
} else {
console.log("maximum tries exceeded");
}
},function(res){
if(res.status == (error_constants.TOKEN_EXPIRE_CODE || error_constants.TOKEN_ERROR_CODE)){
failureCallback(error_constants.LOGOUT_USER,res);
}
});
} else {
failureCallback(null,res);
}
});
};
I'm trying to do something similar in react code. till now i only have reached till here. i know the code is crap. but im still figuring out!
export function fetchProfiles(currentTry,maxTry) {
return function(dispatch) {
axios.post("/profile/find",{
a_id : cookies.load("aid"),
tokn : cookies.load("at")
}).then((response) => {
console.log(response);
dispatch({type: "FETCH_PROFILES_FULFILLED", payload: response.data.data})
})
.catch((err) => {
console.log(err)
if(err.response.status == 498){
fetchAccessToken((res) =>{
if(currentTry < maxTry) {
console.log("at successcall ",currentTry,maxTry);
fetchProfiles(++currentTry, maxTry);
} else {
console.log("maximum tries exceeded");
}
console.log(res);
},(err) =>{
console.log(err);
});
return;
}
dispatch({type: "FETCH_PROFILES_REJECTED", payload: err})
})
}
}
export function fetchAccessToken(successCallback,failureCallback){
axios.post("/account/g_at_w",{
a_id : cookies.load('aid'),
d_id : window.fingerprint.md5hash,
at : cookies.load('at'),
cl : "W",
rt : cookies.load('rt'),
k_ey : cookies.load('secret')
}).then((response) => {
console.log(response);
successCallback(response);
// dispatch({type: "FETCH_PROFILES_FULFILLED", payload: response.data.data})
})
.catch((err) => {
console.log(err.response);
failureCallback(err);
// dispatch({type: "FETCH_PROFILES_REJECTED", payload: err})
})
}
im using redux thunk and axios to perform my api calls. any help is very much appreciated.