Should my Redux handling of errors from axios use different actions or the same action with additional data attached?

Viewed 268

I am making a call to an api using Axios and Thunk middleware with redux to get a list of transactions. Any errors that the API returns will have an error object returned as well. That error object is in the format

{
  "error": {
    "id": "string",
    "name": "string",
    "detail": "string"
  }
}

If I receive a 400 it's some generic error, but a 404 means no transactions were found. What I'd like to know is where should the logic live to parse the response? Should I parse the response in the action creator, and send separate actions, looking something like this:

catch (e) {
  if (e.response) {
    if (e.response.status === 400) {
      //failed for some reason
      dispatch({type: TRANSACTION_REQUEST_ERROR, data: e.response.data})
    }
    if(e.response.status === 404) {
      //no transactions, no problem. 
      dispatch({type: NO_TRANSACTIONS_FOUND, data: e.response.data})
    }
  }
}

or, should I use the same action and include any response information that the reducer needs to make a decision on how to update the state, delegating that logic to the reducer?

catch (e) {
  if (e.response) {
    dispatch({type: TRANSACTION_REQUEST_ERROR, data: e.response.data})
  }
}

//reducer

switch(action.type) {
  case TRANSACTION_REQUEST_ERROR:
   if(action.data.error.id === 'some id)
    //update some state
   else
     //do something else
}

Or, is it six of one, half dozen of the other?

1 Answers

I would use only one action for error and handle cases in the reducer. This ensures that every request in the app is isomorphic and has only 3 actions _REQUEST, _SUCCESS, _ERROR. And it's easier to integrate with middlewares like redux-requests or others.

Related