Search code examples
reactjsreact-reduxdispatch

Possible Unhandled Promise Rejection: Error: Actions must be plain objects. Use custom middleware for async actions


I have a function that is meant to perform various asynchronous actions based on the set inputs. Here is my function:

const generalApiRequest =(requestUrl, urlType, data={},actionDispatch) =>{
    
  return function(dispatch, getState){
      
      console.log(dispatch);
      adminId = getState().authentication.adminId;
      token = getState().authentication.token;
      
      return hitUrl(requestUrl,urlType, dispatch, data).then((response)=>{
          try{
          if(response.status === 200){
              //dispatch(actionDispatch(response.data));
              actionDispatch();
          } 
          else{
            console.log("Wrong response",response);
            if(response.status === 401){
              console.log('login again, auth failed');
              dispatch(authFailed());
            }
          }
        }
        catch(error){
          console.log(error);
         }
        }
        ,(error)=>{console.log(error)})
     
  }
  
};

Here is also hitUrl() which is needed for the function :

const hitUrl= async function(requestUrl, urlType,dispatch, data={}){
  try {
    //const requestUrl = apiUrl+ 'application/fetch-dashboard-data'+`/{$adminId}`;
    if(urlType === "get"){
      response = await axios(requestUrl,header(token));
    }
    else {
      response= await axios.post(requestUrl, data, header(token));
    }
     
    return response;
  } catch (error) {
    console.log(error);
          console.log("error status", error.response.status);
          try{
            if(error.response.status === 401){
              dispatch(authFailed());
            }
          }
          catch(newError){
            console.log(newError)
          }
          
  }
 }

I also have the function processApplicant()

export const processApplicant=(data)=>{
  let requestUrl;
  let urlType = "post";
  let message;
  message = "The user has been successfully deleted"
  requestUrl = apiUrl+ 'application/process/delete';
  let actionDispatch= triggerSuccess(message);
  generalApiRequest(requestUrl,urlType, data, actionDispatch);
}

Now I dispatched the action below in my react component

dispatch(processApplicant({adminId: 2, comment: "No comments", trigger: "Pick", userId: 3}));

On doing this I get the error in the title above (Possible Unhandled Promise Rejection: Error: Actions must be plain objects. Use custom middleware for async actions). I have redux thunk as middleware and it works fine for other request. What I'm I doing wrong please?


Solution

  • Your processApplicant is not set correctly.

    export const processApplicant = (data) => {
        return (dispatch) => {
            let requestUrl;
            let urlType = "post";
            let message;
            message = "The user has been successfully deleted"
            requestUrl = apiUrl + 'application/process/delete';
            let actionDispatch = triggerSuccess(message);
            dispatch(generalApiRequest(requestUrl, urlType, data, actionDispatch));
        }
    
    }