title: Redux-React: error in control flow while dispatchcing a function
body: <p>Please find my code below as I explain the flow that is currently happening:</p>
  
  <p>First SampleParent calls fetchNames and when called, this populates reports array and returns a json array with 6 objects as of now.
  Next, when I loop over the objects in reports array, each time 'fetchDownloadLink' function is called. The function executes till </p>
  
  <pre><code>fetch(uri, obj)
      .then(response =&gt; {
          if (response.status !== 200) {
              throw Error(response.status);
          }
          return response ;
      })
  </code></pre>
  
  <p>and instead of executing further returns back to SampleParent from where it was called for all 6 objects in the reports array.
  Then it enters SampleChild and it renders onClick value as 'undefined'<br>
  Then finally the control suddendly seems to go back to 'fetchDownloadLink' function and executes the rest of the function to return the value of report_uri
  and finally execution ends!</p>
  
  <p>I dont understand why is this hapenning, I want the entire function to execute in one flow so that it would return the 'report_uri' value to 'onClick' prop of SampleChild</p>
  
  <p><strong>store/index.js</strong></p>
  
  <pre><code>import C from '../constants'
  import appReducer from '../reducers/reducers.js'
  import thunkMiddleware  from 'redux-thunk'
  import { createStore, applyMiddleware } from 'redux'
  export default function configureStore() {
  return createStore(
      appReducer,           
      applyMiddleware(
          thunkMiddleware))}
  </code></pre>
  
  <p><strong>Main_Root.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import { Provider } from 'react-redux'
  import configureStore from '../store/index.js'
  import SampleParent from './containers/SampleParent'
  const store = configureStore()
  export default class Root extends Component {
  render() {return (&lt;div&gt;&lt;Provider store={store}&gt;&lt;SampleParent /&gt;&lt;/Provider&gt;&lt;/div&gt;)}}
  </code></pre>
  
  <p><strong>SampleParent.js</strong></p>
  
  <pre><code>import React, {Component} from 'react'
  import { connect } from 'react-redux'
  import { fetchReport, fetchDownloadable } from '../../actions/actions'
  import SampleChild from '../ui/SampleChild'
  class SampleParent extends Component {
  constructor(props) {super(props)}
  componentDidMount() {this.props.fetchNames();}
  render() {return (&lt;div&gt;
              &lt;ul id="myUL"&gt;
                  {this.props.reports.map((report) =&gt; (
                      &lt;li&gt;&lt;SampleChild
                              key={report.id}
                              label={report.label}
                              onClick={this.props.fetchDownloadLink("http://sample"+report.uri+".pdf")}
                          /&gt;&lt;/li&gt;))}&lt;/ul&gt;&lt;/div&gt;)}}
  function mapStateToProps(state) {
  const { reports } = state
  return {reports}}
  const mapDispatchToProps = dispatch =&gt; {
  return {fetchDownloadLink: url =&gt; dispatch(fetchDownloadable(url)),
      fetchNames: () =&gt; dispatch(fetchReport())}}
  export default connect(mapStateToProps , mapDispatchToProps)(SampleParent)
  </code></pre>
  
  <p><strong>SampleChild.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  export default class SampleChild extends Component {
  render() {const { key, label, onClick } = this.props
      return (&lt;span className="inside_SampleChild" id={label}&gt;
          {label}
          &lt;a onClick={onClick}&gt;Click me for pdf download!&lt;/img&gt;&lt;/a&gt;
          &lt;/span&gt;)}}
  </code></pre>
  
  <p><strong>fetchDownlodable function in action.js</strong></p>
  
  <pre><code>export const fetchDownloadable = (uri) =&gt; dispatch =&gt; {
  var obj = {method: 'GET',
      headers: {'Authorization': 'Basic ***=','Accept': 'application/json'},
      'credentials': 'include'};
  fetch(uri, obj)
      .then(response =&gt; {
          if (response.status !== 200) {
              throw Error(response.status);}
          return response ;})
      .then((response) =&gt; response)
      .then(resourceLookup =&gt; {
          dispatch({
              type: C.FETCH_DOWNLOADABLE,
              report_uri: resourceLookup.url})
      }).
  catch(error =&gt; {
      console.log("There was this  error" + error);});}
  </code></pre>
  
  <p><strong>reducer.js</strong></p>
  
  <pre><code>import C from '../constants'
  import { combineReducers } from 'redux'
  export const links = (state=null, action) =&gt; (action.type === C.FETCH_DOWNLOADABLE) ? action.report_uri : state
  export const reports = (state=[], action) =&gt; {
  switch(action.type) {
      case C.FETCH_REPORTS : return action.reports
      default : return state}}
  const rootReducer = combineReducers({ reports, links})
  export default rootReducer
  </code></pre>
  
  <p>Thanks in advance!</p>