React-Redux TypeError: отправка не является функцией

Я пытаюсь создать панель поиска для своего приложения React TODO.

Вот мой класс Searchbar:

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);

Вот мое действие:

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

А вот и мой редуктор:

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;
}

Когда я пишу что-нибудь на панели поиска, я автоматически получаю сообщение об ошибке:

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

Есть идеи по этому поводу? Я не уверен, что моя панель поиска так хорошо реализована.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
5
0
7 471
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В качестве первого аргумента connect ожидает получить функцию mapStateToProps. Поэтому вам нужно явно передать undefined вместо него.

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

Спасибо. Это сработало, теперь мне нужно исправить панель поиска, чтобы отфильтровать мой список TODO.

pedrodotnet 02.05.2018 22:20

Другие вопросы по теме