Ошибка типа: this.props.searchMov ie (Redux Action) не является функцией

Question

Я новичок в React.js и сталкиваюсь с ошибкой в ​​Redux, когда я называю его опорой с помощью mapStateToProps.

Это мой класс

import {Component} from "react";
import React from "react";
import {connect} from "react-redux";
import {searchMovie,fetchMovies} from "../actions/searchActions";
export class SearchForm extends Component{


    onChange = e => {
        this.props.searchMovie(e.target.value);
    };

    onSubmit = e => {
        e.preventDefault()
        this.props.fetchMovies(this.props.text)
    }

    render() {
        return(
            <div className="jumbotron jumbotron-fluid mt-5 text-center">
                <div className="container">
                    <h1 className="display-4 mb-3">
                        <i className="fa fa-search" /> Search for a movie
                    </h1>
                    <form id="searchForm" onSubmit={this.onSubmit}>
                        <input
                            type="text"
                            className="form-control"
                            name="searchText"
                            placeholder="Search Movies"
                            onChange={this.onChange}
                        />
                        <button type="submit" className="btn btn-primary btn-bg mt-3">
                            Search
                        </button>
                    </form>
                </div>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    text: state.movies.text
})

export default connect(mapStateToProps,{searchMovie, fetchMovies})(SearchForm)

Если вы внимательно посмотрите на onChange(), вот откуда возникает ошибка, когда я пытаюсь ввести ввод, возникает исключение:

 onChange = e => {
            this.props.searchMovie(e.target.value);
        };

Тогда мой компонент Root находится здесь:

import React from 'react';
import '../styles/App.css';
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import {Landing} from "./Landing";
import store from "../store/store";
import {Provider} from "react-redux";

function App() {
  return (
        <Provider store={store}>
            <Navbar/>
            <Landing/>
            <Footer/>
        </Provider>
  );
}

export default App;

Тогда как я сделал свой actions:

import {SEARCH_MOVIE} from "./types";


export const searchMovie = text =>  dispatch => {
    dispatch({
        type: SEARCH_MOVIE,
        payload: text
    })
}

Тогда Reducers

import { SEARCH_MOVIE} from "../actions/types";

const initialState = {

    text: '',
    movies :[],
    loading: false,
    movie:[]
}


export default function (state = initialState, action) {

    switch (action.type) {
        case SEARCH_MOVIE:
            return {
                ...state,
                text: action.payload,
                loading: false
            }
        default:
            return state
    }
}

reducer/index.js, где я объединяю мои редукторы:

import {combineReducers} from "redux";
import searchReducer from './searchReducer'


export default combineReducers({
    movies:searchReducer
})

тогда наконец мои store:

import {createStore, applyMiddleware} from 'redux'
import thunk from "redux-thunk";
import {composeWithDevTools} from "redux-devtools-extension";
import rootReducer from '../reducers'

const middleware = [thunk]
const initialState = {};

const store = createStore(rootReducer,
    initialState,
    composeWithDevTools(applyMiddleware(...middleware)))

export default store

Может кто-нибудь сказать мне, где я не прав?

Answer 1

Я никогда не видел, чтобы mapDispatchToProps делал так, как вы раньше. Попробуйте это:

import { bindActionCreators } from "redux";
import actions from "../actions/searchActions";

const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);
export default connect(mapStateToProps,mapDispatchToProps)(SearchForm);

Если это не сработает, у вас возникла более глубокая проблема с настройкой приставки