title: Problems to dispatch action in React/Redux
body: <p>I´m pretty new to React and Redux and have some issue during my first steps with it. I tried to follow the examples in the Redux Doc´s, but it´s hard for me to understand everything, because every example is jumping between ES5 - 6 or even 7 syntax.</p>
  
  <p>However, When I try to dispatch an action I got the following error</p>
  
  <pre><code>Uncaught TypeError: (0 , _index2.default) is not a function
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/m1qtD.png" rel="nofollow">Error Message</a></p>
  
  <p>I know that SO Community doesn´t prefer so much code within one Question, but I don´t know where the problem is coming from. Sorry for that!</p>
  
  <p>These is my Code:</p>
  
  <p>Index.js</p>
  
  <pre><code>import 'babel-polyfill'
  import React from 'react'
  import { render } from 'react-dom'
  import { Provider } from 'react-redux'
  import App from './containers/App'
  import configureStore from './store/configureStore'
  
  const store = configureStore()
  
  render(
    &lt;Provider store={store}&gt;
      &lt;App /&gt;
     &lt;/Provider&gt;,
     document.getElementById('root')
   )
  </code></pre>
  
  <p>My Store</p>
  
  <pre><code>import { createStore, applyMiddleware } from 'redux'
  import thunkMiddleware from 'redux-thunk'
  import createLogger from 'redux-logger'
  import index from '../reducers'
  
  export default function configureStore(preloadedState) {
    const store = createStore(
      index,
      preloadedState,
      applyMiddleware(thunkMiddleware, createLogger())
     )
  
     if (module.hot) {
        // Enable Webpack hot module replacement for reducers
        module.hot.accept('../reducers', () =&gt; {
          const nextRootReducer = require('../reducers').default
          store.replaceReducer(nextRootReducer)
       })
      }
  
     return store
   }
  </code></pre>
  
  <p>My Container Component</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react'
  import AddTodo from '../components/AddTodo'
  import { connect } from 'react-redux'
  import addItem from '../actions/index'
  
  class App extends Component {
     constructor(props) {
      super(props)
      this.handleClick = this.handleClick.bind(this)
  }
  
  handleClick(e){
      console.log("click")
      console.log(e);
      const {dispatch} = this.props
      dispatch(addItem(e));
  }
  
  render() {
      return (
          &lt;div&gt;
          &lt; h1 &gt; Hallo &lt;/h1&gt;
              &lt;AddTodo handleAddItem={this.handleClick}/&gt;
          &lt;/div&gt;
         )
      }
  }
  
  App.propTypes = {
     dispatch: PropTypes.func.isRequired
  }
  
  function mapStateToProps(state){
     return {
        AddTodo
     }
   }
  
   export default connect (mapStateToProps)(App)
  </code></pre>
  
  <p>My Child Component:</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react'
  import addItem from '../actions/index'
  
  export default class AddTodo extends Component {
     constructor(props) {
      super(props)
      this.handleClick = this.handleClick.bind(this)
      this.state = {newItem: ''}
    }
  
  onChange(e){
      console.log("change")
      console.log(e.target.value);
      this.setState({newItem: e.target.value})
  }
  
  handleClick(e){
      this.props.handleAddItem(this.state.newItem)
     // const {dispatch} = this.props
     // console.log("clickc")
     // console.log(this.state.newItem);
     // dispatch(addItem(this.state.newItem))
  }
  
  render() {
      return (
          &lt;div&gt;
              &lt;h3&gt;Add Item &lt;/h3&gt;
              &lt;input
                  type="text"
                  value={this.state.newItem}
                  onChange={this.onChange.bind(this)}
                  /&gt;
              &lt;button onClick={this.handleClick}&gt;Hallo&lt;/button&gt;
          &lt;/div&gt;
      )
     }
    }
  </code></pre>
  
  <p>The Reducer</p>
  
  <pre><code> export default (state = [], action) =&gt; {
     switch (action.type){
      case 'ADD_ITEM':
          return action.item
      }
    }
  </code></pre>
  
  <p>And Finally the action</p>
  
  <pre><code>export function addItem(item){
     console.log("addTOdo")
     return {
        type: 'ADD_ITEM',
        item
      }
    }
  </code></pre>
  
  <p>I hope someone can help me here, sitting since several hours and don´t understand what is happening. </p>