title: How to catch and handle error response 422 with Redux/Axios?
body: <p>I have an action making a <code>POST</code> request to the server in order to update a user's password, but I'm unable to handle the error in the chained catch block.</p>
  
  <pre><code>return axios({
    method: 'post',
    data: {
      password: currentPassword,
      new_password: newPassword
    },
    url: `path/to/endpoint`
  })
  .then(response =&gt; {
    dispatch(PasswordUpdateSuccess(response))
  })
  .catch(error =&gt; {
    console.log('ERROR', error)
    switch (error.type) {
      case 'password_invalid':
        dispatch(PasswordUpdateFailure('Incorrect current password'))
        break
      case 'invalid_attributes':
        dispatch(PasswordUpdateFailure('Fields must not be blank'))
        break
    }
  })
  </code></pre>
  
  <p>When I log the error this is what I see:</p>
  
  <p><a href="https://i.stack.imgur.com/u6YS9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/u6YS9.png" alt="Error Logged"></a></p>
  
  <p>When I check the network tab I can see the response body, but for some reason I can't access the values!</p>
  
  <p><a href="https://i.stack.imgur.com/V8rQm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/V8rQm.png" alt="Network Tab"></a></p>
  
  <p>Have I unknowingly made a mistake somewhere? Because I'm handling other errors from different request fine, but can't seem to work this one out.</p>