title: React/Redux can't iterate over array in state
body: <p>I'm in the process of learning React/Redux and I've run into an issue while converting a single page web app of mine to the framework/paradigm. What i'm trying to do is let the initial state of the web app have an array that is to be populated by objects from an API request, this array is called "makes". I want to do this so I can display "makes" from the API on the first page of the website upon it loading. This can be seen in the <code>index.js</code> file below:</p>
  
  <pre><code>import App from './App';
  import './index.css';
  import configureStore from './redux/store'
  import { Provider } from 'react-redux'
  
  let makesUrl = 'the url to the API'
  let cached = cache.get(makesUrl)
  let makes = []
  
  // Future cache setup.
  if(!cached) {
      console.log("NOT CACHED")
  }
  else {
      console.log("CACHED")
  }
  
  // Get the makes via API.
  fetch(makesUrl).then((response) =&gt; {
      // Pass JSON to the next 'then'
      return response.json()
  }).then((json) =&gt; {
      json.makes.forEach((make) =&gt; {
          makes.push(make)
      })
  })
  
  let initialState = {
    grids: [],
    makes: makes
  }
  
  let store = configureStore(initialState)
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p>The <code>state</code> and <code>dispatch</code> are mapped to the props and passed down to the components that need them in my <code>App.js</code> file as such:</p>
  
  <pre><code>import React, { Component } from 'react'
  import { connect } from 'react-redux'
  import { bindActionCreators } from 'redux'
  import './App.css'
  import Head from './components/Head'
  import Middle from './components/Middle'
  import Foot from './components/Foot'
  import actions from './redux/actions'
  
  class App extends Component {
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div&gt;
            &lt;Head /&gt;
            &lt;div className="middle container"&gt;
              &lt;Middle actions={this.props.actions} makes={this.props.makes}/&gt;
            &lt;/div&gt;
            &lt;Foot /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return state
  }
  
  function mapDispatchToProps(dispatch) {
    return {
      actions: bindActionCreators(actions, dispatch)
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(App)
  </code></pre>
  
  <p>At all points, in the chrome dev tools, I can see that the API call was successful and the state is shown to have <code>makes: Array[62]</code> with 62 objects inside, however if I console log the length of the array in the component that these makes are passed down to as seen below, it says the length is 0, and each index of the array is undefinded.</p>
  
  <pre><code>import React, { Component } from 'react'
  
      class MakeButtons extends Component {
  
          handleClick(event) {
              event.preventDefault()
              console.log("CLICK")
          }
  
          render() {
              return(
                  &lt;div&gt;
                      {
                          console.log(this.props.makes.length)
                      }
                  &lt;/div&gt;
              )
          }
      }
  
      export default MakeButtons
  </code></pre>
  
  <p>This is essentially what I've been trying to figure out for the past couple hours, so I can use the <code>forEach</code> or <code>map</code> function to return links/buttons for each of the objects in the array, however at the moment this does not work, despite dev tools showing the state to be normal. Any help/explanations would be greatly appreciated!</p>