title: Redux : Cannot read property 'dispatch' of undefined
body: <p>I'm so confused on why this is undefined. I set up store, and can even view it through Chrome's Redux Tools and it show correctly, however when I try and dispatch to the Store, I always get a <em>Cannot read property 'dispatch' of undefined</em> error. It's really bugging me because I have no idea what is going on. I have followed numerous tutorials letter for letter, and am still stuck with the same error message.</p>
  
  <p><strong><em>index.js</em></strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { createStore } from 'redux';
  import manageEmails from './reducers/manageEmails';
  import App from './App';
  import './index.css';
  
  export function configureStore(){
    return createStore(
      manageEmails,
      window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; 
      window.__REDUX_DEVTOOLS_EXTENSION__()
    );
  };
  
  ReactDOM.render(
    &lt;App store={configureStore()} /&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p><strong><em>manageEmails.js</em></strong></p>
  
  <pre><code>export default function manageEmails(state = {
    numberOfEmails: 0,
    emails: [],
  }, action) {
    switch(action.type) {
      case "ADD_USER":
        return Object.assign({}, state, {
          emails:state.emails.concat(action.email)
        });
  
    default:
      return state;
    }
  }
  </code></pre>
  
  <p><strong><em>App.js</em></strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import $ from 'jquery';
  import Typed from 'typed.js';
  import AboutDiv from '../src/components/AboutDiv.js'
  import ContactDiv from '../src/components/ContactDiv.js'
  import Navigation from '../src/components/Navigation.js'
  import Background from '../src/components/Background.js'
  import Overlay from '../src/components/Overlay.js'
  import Emails from '../src/components/Emails.js'
  import { BrowserRouter as Router, Route } from "react-router-dom"
  
  
  $(document).ready(function() {
      var options = {
          strings: ["dj@khaled.com", "post@malone.com",       
         "drizzy@drake.com"],
          typeSpeed: 175,
          backSpeed: 20,
          fadeOut: true,
          loop: true,
          attr: 'placeholder'
      }
  
      var typed = new Typed( (".typed"), options);
  });
  
  export class App extends Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;div className="App"&gt;
            &lt;Navigation /&gt;
            &lt;Background /&gt;
            &lt;Overlay /&gt;
            &lt;Emails store={this.props.store}/&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><strong><em>Emails.js</em></strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  export default class Emails extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        email: '',
      };
    }
  
    handleOnSubmit(event) {
      debugger
      event.preventDefault();
      this.props.store.dispatch({
        type: "ADD_EMAIL",
        email: this.state.email,
      })
    }
  
   render() {
      return(
        &lt;button onClick={this.handleOnSubmit.bind(this)}&gt;
          Click Me
        &lt;/button&gt;
      )
    }
  };
  </code></pre>