Implement callbacks between two actions in redux

121 Views Asked by At

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.

0

There are 0 best solutions below