类型错误：this.props.searchMovie (Redux Action) 不是函数

Question

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

This is my class

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)

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

Then my Root component is here :

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

Can anyone tell me where am wrong ?

Answer 1

I've never seen the mapDispatchToProps done like you have before. Try this:

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

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

If this doesn't work, you've got a deeper nested problem with the way you have setup redux

Answer 2

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

Try this in the searchActions file and remove fetch movie functions from everywhere {remove it from the search form in the connect function, the import statement, and onSubmit function } . It will work right now, then open redux from redux extension in the chrome browser and see the state if it changes when you start typing or not. and guess what it will change without errors:)

---

After that add the fetchmovie function in searchActions file and make sure that you also add it as a second case in the reducer file cause you missed it. Also, add it into the search form as the second parameter in the connect function, the import statement, and in the onSumbit function.

Add this in searchActions

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

export const fetchMovie = text => dispatch => {
axios
  .get(`https://www.omdbapi.com/?apikey=${APIKey}&s=${text}`)
  .then(response =>
    dispatch({
      type: FETCH_MOVIES,
      payload: response.data
    })
   )
  .catch(err => console.log(err));
  };

And add this in reducer file

  case FETCH_MOVIES:
            return{
                ...state,
                movies: action.payload,
                loading: false
            };   
        default:
            return state;
    }
   }

after that, it will work.