TypeError:this.props.searchMovie(Redux Action)不是一个函数

Am new in React.js, and am facing an error in Redux when I call it as a prop with the help of mapStateToProps.

这是我的课

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)

If you closely look at onChange(), this is where the error comes from , when I try to type in the input, the exception is thrown :

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

然后我的根组件在这里:

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;

Then how I made my actions :

import {SEARCH_MOVIE} from "./types";


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

Then, the 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, is where I combine my reducers :

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


export default combineReducers({
    movies:searchReducer
})

Then finally my 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

谁能告诉我哪里错了?

评论