How to catch and handle error response 422 with Redux/Axios?
<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>