javascript - React-Redux TypeError: dispatch is not a function - Stack Overflow

admin管理员组

文章数量:1287523

I'm trying to create a Search bar to my React TODO App.

Here's my Searchbar class:

import React, { Component } from 'react';
import { FilterTasks } from '../../redux/actions/searchbar';
import searchreducer from '../../redux/reducers/searchbar';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class SearchBar extends Component{
    constructor(props){
        super(props);
        this.state = {term: ''};
    }

    render(){
        return(
            <div>
            <input 
                className='searchbar' 
                placeholder="Filter by task" 
                onChange={term => this.props.FilterTasks(term.target.value)} />
            </div>
        );
    }
}

function MapDispatchToProps(dispatch){
    return bindActionCreators({FilterTasks},dispatch); 
}

export default connect (MapDispatchToProps)(SearchBar);

Here's my action:

export const FilterTasks = (filter) => {
    return {
        type: 'FILTER_TASKS',
        filter
    }
}

And here's my reducer:

const SearchReducer = (state = {},action) =>{
    switch(action.type){
        case 'FILTER_TASKS':
        return {
            tasks: state.tasks.filter(it => it.task.toLowerCase().includes(action.filter.toLowerCase()))
        };
        break;
    }
    return state;
}

When I write anything on the searchbar I automatically get the error:

 Uncaught TypeError: dispatch is not a function
    at Object.FilterTasks

Any ideas on this?, I'm not sure if my search bar is well implemented like this.

I'm trying to create a Search bar to my React TODO App.

Here's my Searchbar class:

import React, { Component } from 'react';
import { FilterTasks } from '../../redux/actions/searchbar';
import searchreducer from '../../redux/reducers/searchbar';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class SearchBar extends Component{
    constructor(props){
        super(props);
        this.state = {term: ''};
    }

    render(){
        return(
            <div>
            <input 
                className='searchbar' 
                placeholder="Filter by task" 
                onChange={term => this.props.FilterTasks(term.target.value)} />
            </div>
        );
    }
}

function MapDispatchToProps(dispatch){
    return bindActionCreators({FilterTasks},dispatch); 
}

export default connect (MapDispatchToProps)(SearchBar);

Here's my action:

export const FilterTasks = (filter) => {
    return {
        type: 'FILTER_TASKS',
        filter
    }
}

And here's my reducer:

const SearchReducer = (state = {},action) =>{
    switch(action.type){
        case 'FILTER_TASKS':
        return {
            tasks: state.tasks.filter(it => it.task.toLowerCase().includes(action.filter.toLowerCase()))
        };
        break;
    }
    return state;
}

When I write anything on the searchbar I automatically get the error:

 Uncaught TypeError: dispatch is not a function
    at Object.FilterTasks

Any ideas on this?, I'm not sure if my search bar is well implemented like this.

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow asked May 2, 2018 at 18:57 pedrodotnetpedrodotnet 81833 gold badges2121 silver badges4040 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

As a first argument connect expects to get a mapStateToProps function. So you need to explicitly pass an undefined instead of it.

export default connect(undefined, MapDispatchToProps)(SearchBar);

本文标签： javascriptReactRedux TypeError dispatch is not a functionStack Overflow