dispatch is not a function, how to use dispatch in react?

Question

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

TodoInput.js

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)=>{
    //         this.setState({value:event.target.value});    
    // }

    handleSubmit=(e)=>{
        if(this.refs.title.value===''){
            alert('You must input something');
        }
        else{

        }
        e.preventDefault();

    }

    showInput=()=>{
        var {dispatch}=this.props;
        dispatch({type:'TOGGLE_IS_ADDING'});
    }

    render(){
        if(this.props.isAdding){
            return(
                <form className='input-group' onSubmit={this.handleSubmit}>
                    <input type='text' ref="title" className='form-control'placeholder={this.props.todoText}/>
                    <span className='input-group-btn'>
                    <input type='submit' value='Submit' className='btn btn-primary'  />
                    </span>
                </form>
            );
        }
        return(
            <button className='btn btn-info' onClick={this.showInput}>+</button>
        );

    }
}


// function mapDispatchToProps(dispatch){
//     return({
//         toggleAdding:()=>{dispatch({type:'TOGGLE_IS_ADDING'})}
//     })
// }
// function mapStateToProps(state){
//     return {isAdding: state.isAdding}
// }


connect(function(state){
    isAdding:state.isAdding
})(InputTodo);

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

example.js (Redux is written here )

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)=>{
    switch (action.type) {
        case 'ADD_ITEM':
            return [...state, action.item]
        case 'REMOVE_ITEM':
            return state.filter((e,i)=>i!==action.id)      
        default:
            return state;
    }
}

var isAddingReducer=(state=false,action)=>{
    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=>f
));

store.subscribe(()=> 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;

Did you tried with something like this: gist.github.com/muZk/7892bd61484e86aa0a05041beecf8b2f — muZk
Yes, I did, I tried it in the comment line, the input form didn't show up — Alice

Nick Wyman Nick Wyman · Accepted Answer · 2017-10-04T15:06:03

In your example, you are only exporting the unconnected component. The Higher Order Component (HOC) you are building by calling the connect function isn't being consumed.

export default connect(function(state){
    isAdding:state.isAdding
})(InputTodo);

dispatch is not a function, how to use dispatch in react?

1 Answers