title: How to handle errors in fetch() responses with Redux Thunk?
body: <p>I'm making API requests using isomorphic fetch, and using Redux to handle my app's state.</p>
  
  <p>I want to handle both internet connection loss errors, and API errors, by firing off Redux actions.</p>
  
  <p>I have the following (work-in-progress / bad) code, but can't figure out the correct way to fire the Redux actions (rather than just throw an error and stop everything) :</p>
  
  <pre><code>export function createPost(data = {}) {
  
      return dispatch =&gt; {
  
          dispatch(requestCreatePost(data))
  
          return fetch(API_URL + data.type, {
              credentials: 'same-origin',
              method: 'post',
              headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json',
                  'X-WP-Nonce': API.nonce
              },
              body: JSON.stringify(Object.assign({}, data, {status: 'publish'}))
          }).catch((err) =&gt; {
  
              //HANDLE WHEN HTTP ISN'T EVEN WORKING
              return dispatch =&gt; Promise.all([
                  dispatch({type: PRE_FETCH_RESOURCES_FAIL, errorType: 'fatal', message:'Error fetching resources', id: h.uniqueId()}),
                  dispatch({type: PRE_CREATE_API_ENTITY_ERROR, errorType: 'fatal', id: h.uniqueId(), message: 'Entity error before creating'})
              ])
          }).then((req) =&gt; {
  
              //HANDLE RESPONSES THAT CONSTITUTE AN ERROR (VIA THEIR HTTP STATUS CODE)
              console.log(req);
              if (!req || req.status &gt;= 400) {
                  return dispatch =&gt; Promise.all([
                      dispatch({type: FETCH_RESOURCES_FAIL, errorType: 'warning', message:'Error after fetching resources', id: h.uniqueId()}),
                      dispatch({type: CREATE_API_ENTITY_ERROR, errorType: 'warning', id: h.uniqueId(), message: 'Entity error whilst creating'})
                  ])
              }
              else {
                  return req.json()
              }
          }).then((json) =&gt; {
              var returnData = Object.assign({},json,{
                  type: data.type
              });
              dispatch(receiveCreatePost(returnData))
          })
      }
  }
  </code></pre>
  
  <p>If I intionally disable the internet connection, in the JS Console, when I log via console.log() (as above), it's outputting this:
  <code>
  POST http://example.com/post net::ERR_INTERNET_DISCONNECTED(anonymous function)
   (dispatch) {
                      return Promise.all([dispatch({ type: PRE_FETCH_RESOURCES_FAIL, errorType: 'fatal', message: 'Error fetching resources', id: _CBUtils2.default.uniqueId() }), dispatch({ type:…
  cb_app_scripts.js?ver=1.0.0:27976 Uncaught (in promise) TypeError: req.json is not a function(…)
  </code></p>
  
  <p>Forgive me if this is entirely wrong, but I don't want to do anything but fire off two Redux Actions when there is an error (a general error, and one specific to the action we were performing when the error occurred).</p>
  
  <p>Is what I'm trying to achieve even possible?</p>
  
  <p>It seems that (via my logging to console) the 'then' part of the script is still being executed (as the contents of it are my 'catch' dispatch functions)..</p>