title: dispatch is not a function, how to use dispatch in react?
body: <p>I already created a todo List by React, now I want to use Redux to manage React's states. When I dispatch a store to React I got the error dispatch is not a function. To be more specific, I got a + button, when I click on + button, I want the input form to show up</p>
  
  <p>TodoInput.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import '../App.css';
  import {connect} from 'react-redux'
  
  export default class InputTodo extends Component{
  
  
      // Using ref instead of onChange attribute
      // handleChange=(event)=&gt;{
      //         this.setState({value:event.target.value});    
      // }
  
      handleSubmit=(e)=&gt;{
          if(this.refs.title.value===''){
              alert('You must input something');
          }
          else{
  
          }
          e.preventDefault();
  
      }
  
      showInput=()=&gt;{
          var {dispatch}=this.props;
          dispatch({type:'TOGGLE_IS_ADDING'});
      }
  
      render(){
          if(this.props.isAdding){
              return(
                  &lt;form className='input-group' onSubmit={this.handleSubmit}&gt;
                      &lt;input type='text' ref="title" className='form-control'placeholder={this.props.todoText}/&gt;
                      &lt;span className='input-group-btn'&gt;
                      &lt;input type='submit' value='Submit' className='btn btn-primary'  /&gt;
                      &lt;/span&gt;
                  &lt;/form&gt;
              );
          }
          return(
              &lt;button className='btn btn-info' onClick={this.showInput}&gt;+&lt;/button&gt;
          );
  
      }
  }
  
  
  // function mapDispatchToProps(dispatch){
  //     return({
  //         toggleAdding:()=&gt;{dispatch({type:'TOGGLE_IS_ADDING'})}
  //     })
  // }
  // function mapStateToProps(state){
  //     return {isAdding: state.isAdding}
  // }
  
  
  connect(function(state){
      isAdding:state.isAdding
  })(InputTodo);
  </code></pre>
  
  <p>In the comment lines, I tried to create mapDispatchtoProps and mapSatetoProps as the redux documentation, but it still doesn't work, so I came back to the first codes. I would like to use dispatch like this format dispatch({type:'TOGGLE_IS_ADDING'}) in case I want to add more items to the todo list</p>
  
  <p>example.js (Redux is written here )</p>
  
  <pre><code>import {createStore,compose,combineReducers} from 'redux';
  
  var defaultTodoState={
      todos:[
          {id:0,text:'Make dinner'},
          {id:1,text:'Fold the laundry'},
          {id:2,text:'Do homework'}
      ]
  }
  
  var todoReducer=(state=defaultTodoState.todos,action)=&gt;{
      switch (action.type) {
          case 'ADD_ITEM':
              return [...state, action.item]
          case 'REMOVE_ITEM':
              return state.filter((e,i)=&gt;i!==action.id)      
          default:
              return state;
      }
  }
  
  var isAddingReducer=(state=false,action)=&gt;{
      switch (action.type) {
          case 'TOGGLE_IS_ADDING':
              return !state
          default:
              return state;
      }
  }
  
  var reducer=combineReducers({
      activities:todoReducer,
      isAdding: isAddingReducer
  });
  
  // create devTool
  var store=createStore(reducer, compose(
      window.devToolsExtension ? window.devToolsExtension() : f=&gt;f
  ));
  
  store.subscribe(()=&gt; console.log(store.getState()));
  
  store.dispatch({type:'TOGGLE_IS_ADDING'});
  
  // console.log(store.getState());
  
  store.dispatch({
      type: 'ADD_ITEM',
      item:{
          id:3,
          text:'Prepare lunch'
      }
  });
  // console.log(store.getState());
  
  store.dispatch({
      type:'REMOVE_ITEM',
      id:2
  })
  // console.log(store.getState());
  
  
  console.log('Hello from example');
  export default store;
  </code></pre>