title: "dispatch is not a function at onSubmit" after clicking submit button
body: <p>After entering the text in input field and clicking submit button the error occurs: Uncaught TypeError: dispatch is not a function
      at onSubmit</p>
  
  <p>Connecting state and props seems to be correct.</p>
  
  <p>What could be wrong?</p>
  
  <pre><code>  */TODOLIPUT*/
  import React from 'react'
  import { connect } from 'react-redux'
  import {addTodo} from '../actions/index'
  import {bindActionCreators} from 'redux'
  
  
  let AddTodo = ({ dispatch }) =&gt; {
    let input
  
      return (
      &lt;div&gt;
        &lt;form onSubmit={e =&gt; {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ''
        }}&gt;
          &lt;input ref={node =&gt; {
            input = node
          }} /&gt;
          &lt;button type="submit"&gt;
            Add Todo
          &lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    )
  }
  
  const mapStateToProps = (state) =&gt; {
    return {
      todos: state.todos
    }
  }
  
  function matchDispatchToProps(dispatch){
      return bindActionCreators({addTodo: addTodo}, dispatch);
  }
  
  export default connect(mapStateToProps, matchDispatchToProps)(AddTodo)
  
  /*TODOLIST*/
  import React from 'react';
  import {Todo} from './todo';
  import { connect } from 'react-redux'
  import {bindActionCreators} from 'redux'
  
  const TodoList = ({ todos, onTodoClick }) =&gt; (
    &lt;ul&gt;
      {todos.map(todo =&gt;
        &lt;Todo {...todo} /&gt;
      )}
    &lt;/ul&gt;
  )
  
  function mapStateToProps(state) {
      return {
          todos:state.todos
      }
  }
  
  export default connect(mapStateToProps, null)(TodoList)
  
  
  
  /* REDUCER */
  import {combineReducers} from 'redux';
  
  
  export const reducers = combineReducers({
      todos:todos
  })
  
  
  
  export function todos(state=[], action) {
      switch(action.type) {
          case 'ADD_TODO':
              return [
                  ...state,
                  {
                      text:text,
                      completed:false
                  }
              ]
          default:
          return state
      }
  } 
  
  */ACTION*/
  export const addTodo = (text) =&gt; {
    return {
      type: 'ADD_TODO',
      text
    }
  }
  </code></pre>