svrcekmichal / redux-axios-middleware

Redux middleware for fetching data with axios HTTP client
MIT License
918 stars 96 forks source link

on fail I'm not getting error response's data #108

Open NishantDesai1306 opened 5 years ago

NishantDesai1306 commented 5 years ago

I am trying to use this lib for my dummy app which has basic login functionality, I'm using https://reqres.in for mocking the API.

now on LOGIN_UNSUCCESSFUL response the API sends {error: 'user not found'}, but I am not getting error.response.data in dispatched action.

My setup

const client = axios.create({
    baseURL: BASE_URL,
    responseType: 'json'
});

return createStore(
    rootReducer,
        applyMiddleware(
                axiosMiddleware(client),
        ),
);

the only keys that are present in action object which gets dispatched on failure are ['message', 'name', 'description', 'fileName', 'lineNumber', 'columnNumber', 'stack', 'config', 'code']

pathikmehta commented 5 years ago

I am facing the same problem. In case of error it is just giving "error": [Error: Request failed with status code 401] in action.error but it is not providing the actual response object from which I can fetch some data, parameter which is set by the server.

I also tried to get that in the promise's catch block. But it looks like it is not executing catch block even if the request is getting 401 or similar error response back. Even in such failure cases, it is executing the then block of promise considering the request is succeeded.

So currently, I don't see any way to get the actual response in case of failures.

NishantDesai1306 commented 5 years ago

I ended up using onError callback and then dispatching REQ_FAIL manually from there, and this callback function can access the actual axios's response so you can add whatever you like in the payload of the dispatched action.

It's not a solution but a workaround to make my project workable till I get a proper solution.

// example action
export const login = (email, password) => {
  return {
    type: LOGIN,
    payload: {
      request: {
        method: 'POST',
        url: '/login',
        data: {
          email,
          password,
        },
        options: {
          onError({ getState, dispatch, error }) {
            dispatch({
              type: LOGIN_FAIL,
              payload: error.response
            });
          },
        }
      },
    }
  }
}
Overdozed commented 4 years ago

General solution: axiosMiddleware(client, { onError: ({ action, dispatch, error: { message } }) => { dispatch({ type: action.type + '_FAIL', payload: { error: message } }); } })

matviishyn commented 4 years ago

Check my answer on https://github.com/svrcekmichal/redux-axios-middleware/issues/87

adrielFab commented 4 years ago

u can grab it in the component by doing

try {
   await login()
} catch(e) {
 log( e.error.response )
}

the value returned gives

{
 data: {},
 status: ###,
}

im also on version 4.0.1

acrosson commented 4 years ago

Has anyone figured this out? The data property is null for me. I tried @Overdozed approach, but i'm only getting a generic message, not the string thats in the body response.