title: redux-thunk and handling exceptions inside dispatch results
body: <p>I have a basic thunk action creator and reducer adapted from the Redux documentation: <a href="http://redux.js.org/docs/advanced/AsyncActions.html" rel="noreferrer">http://redux.js.org/docs/advanced/AsyncActions.html</a></p>
  
  <pre><code>// action creator
  
  function fetchPosts () {
    return dispatch =&gt; {
      dispatch({ type: 'FETCH_POSTS_REQUEST' })
  
      return fetch('http://jsonplaceholder.typicode.com/posts')
        .then(response =&gt; response.json())
        .then(json =&gt; dispatch({ type: 'FETCH_POSTS_SUCCESS', items: json }))
        // THIS CATCHES FETCH REQUEST ERRORS, AND COMPONENT LEVEL ERRORS
        .catch(error =&gt; dispatch({ type: 'FETCH_POSTS_FAILURE', error: error.message }))
    }
  }
  
  // reducer
  
  function reducer (state = { isFetching: false, items: [] }, action) {
    switch (action.type) {
      case 'FETCH_POSTS_REQUEST':
        return Object.assign({}, state, { isFetching: true })
      case 'FETCH_POSTS_SUCCESS':
        return Object.assign({}, state, { isFetching: false, items: action.items })
      case 'FETCH_POSTS_FAILURE':
        return Object.assign({}, state, { isFetching: false })
      default:
        return state
    }
  }
  </code></pre>
  
  <p>In a React component that is passed the state as props, I check for the presence of post items, and if present force an component level error:</p>
  
  <pre><code>const Test = props =&gt; {
    if (!props.items.length) return null
    throw new Error('Error!')
  }
  </code></pre>
  
  <p>When starting the app:</p>
  
  <ol>
  <li><code>fetchPosts</code> action creator is called</li>
  <li>A HTTP request is made, and after the response a <em>FETCH_POSTS_SUCCESS</em> action is dispatched. </li>
  <li>The component now updates with the resulting <em>items</em> in the state and attempts to read <code>props.invalidProperty.error</code></li>
  <li>This causes a JS exception: <code>Cannot read property 'error' of undefined</code></li>
  </ol>
  
  <p>So far so good.</p>
  
  <p>The issue is that the JS exception from the component is never output to the console. Instead, the <code>catch()</code> block for the fetch promise catches the error, and dispatches an <em>FETCH_POSTS_FAILURE</em> action. </p>
  
  <p>This has the effect of swallowing all errors in components that were affected by updating the store. A <em>FETCH_POSTS_FAILURE</em> state change is dispatched, but this feels incorrect - there was no error actually fetching the posts, but an error downstream in a component using those posts.</p>
  
  <p>I'm looking for a pattern to help separate errors in the async request from any other random error that occurs as a result of changing the state via dispatch.</p>
  
  <hr>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Example with the async example in the Redux github repo: <a href="https://github.com/nandastone/redux/commit/88ab48040ce41c39d8daba8cc0c13a6f32c38adf#diff-eeb827d44ad03655e63b7e9319a03dd4R6" rel="noreferrer">https://github.com/nandastone/redux/commit/88ab48040ce41c39d8daba8cc0c13a6f32c38adf#diff-eeb827d44ad03655e63b7e9319a03dd4R6</a></p>