title: React + Redux: Debugging hell with dispatch({.., payload: promise})
body: <p>Working on an isomorphic app under Electrode framework and having debugging issue that I'm unable to solve.
  I believe, the framework here doesn't matter and you can reproduce the same easily.</p>
  
  <p>Used: Redux, redux-thunk, redux-promise-middleware, redux-devtools-extension (helps to debug redux flow in with Chrome-extension).</p>
  
  <p><strong>The issue is that I don't receive the informative exception from the child element that makes the debugging a hell.</strong></p>
  
  <p>Will appreciate a lot for any hints on how to fix it. Providing a simplified code for the reference:</p>
  
  <pre><code>import React from "react";
  import { render } from "react-dom";
  import thunk from 'redux-thunk';
  import promise from 'redux-promise-middleware';
  import { applyMiddleware, createStore } from 'redux';
  import { connect } from "react-redux";
  import { composeWithDevTools } from 'redux-devtools-extension';
  
  const rootReducer = function(state = { test: false }, action) {
    switch (action.type) {
      case 'TEST_FULFILLED': {
        state = {
          ...state,
          test: true
        };
        break;
      }
    }
    return state;
  };
  
    const store = createStore(
      rootReducer,
      composeWithDevTools(
        applyMiddleware(promise(), thunk)
      )
    );
  
    const asyncCallAction = () =&gt; dispatch =&gt; {
      dispatch({
        type: 'TEST',
        payload: new Promise(resolve=&gt;{
          resolve(true)
        })
      });
    };
  
    class Test extends React.Component {
      componentWillMount() {
        this.props.asyncCall();
      }
  
      render() {
        const { test } = this.props;
        console.log('Test Value: ', test)
        return (
          &lt;div&gt;
            If test passed you should see the output below, or the exception in console:
  
            {
              test &amp;&amp; // No exception shown regarding the invalid child element shown
              // test &amp;&amp; // If commented, shows the exception from the invalid child element
              &lt;ElementWithError someState={true} /&gt;
            }
          &lt;/div&gt;
        );
      }
    }
  
    class ElementWithError extends React.Component {
      render() {
  
        ThrowError(); // Expecting: ThrowError is not defined exception
  
        return &lt;div&gt;
          Test Passed
        &lt;/div&gt;
      }
    }
  
    const mapStateToProps = state =&gt; {
      return {
        test: state.test
      };
    };
  
  
    const Render = connect(mapStateToProps, dispatch =&gt; ({
      dispatch,
      asyncCall: ()=&gt;dispatch(asyncCallAction()),
    }))(Test);
  
  
    render(
      &lt;Render store={store} /&gt;,
      document.querySelector('.js-content')
    );
  </code></pre>