javascript - 如何修复 "dispatch is not a function"错误

Question

我正在开发一个简单的 react-redux 项目，该项目根据用户提供的搜索词从 OMDB api 获取有关电影的信息。我目前在尝试将文本输入搜索栏以更新与要搜索的电影标题对应的存储值时遇到问题。我对 react 还很陌生，对 redux 完全陌生我之前只完成了另一个 redux 项目，我以与上次完全相同的方式设置了我的 Action 和 reducer，但这次我遇到了“Uncaught TypeError: dispatch 不是函数”。这不是我在上一个项目中遇到的问题，到目前为止我的谷歌搜索也不是很有帮助。

我在谷歌上搜索了这个问题，只找到了一些结果，但似乎没有一个与我有完全相同的问题，它们涉及使用 mapDispatchToProps，我没有在我的连接函数中使用它。据说当你像我一样编写 mapStateToProps 时，dispatch 应该作为 prop 传递给连接的组件，但每当我尝试访问它时，我都会收到前面提到的“Uncaught TypeError:dispatch is not a function”错误。

这是我的组件的 index.js

import { connect } from 'react-redux';
import MovieSearch from './MovieSearchContainer';
import { 
  updateSearchTerm,
  getMovies
} from './movieSearchActions';

function mapStateToProps(state){
  return {
    title: state.movieSearch.title,
    year: state.movieSearch.year,
    plot: state.movieSearch.plot,
    released: state.movieSearch.released,
    runtime: state.movieSearch.runtime,
    genre: state.movieSearch.genre,
    plot: state.movieSearch.plot,
    ratings: {
      IMDB: state.movieSearch.ratings.IMDB,
      Metascore: state.movieSearch.ratings.Metascore
    },
    posterUrl: state.movieSearch.posterUrl,
    cachedMovies: state.movieSearch.cachedMovies
  };
}

export default connect(mapStateToProps)(MovieSearch);

这是我的 Action

export function updateSearchTerm(searchTerm){
  return {
    type: "UPDATE_SEARCH_TERM",
    payload: { searchTerm }
  }
}

这是我的 jsx 组件

import React from 'react';
import PropTypes from 'prop-types';
import {
  updateSearchTerm,
  getMovies
} from './movieSearchActions';

export default class MovieSearchContainer extends React.Component 
{
  constructor(props) {
    super(props);

    this.handleUpdateSearchTerm = 
    this.handleUpdateSearchTerm.bind(this);
  }

  handleUpdateSearchTerm(event){
    const { dispatch } = this.props;
    const { value } = event.target;
    dispatch(updateSearchTerm(value));
  }

  render() {
    return (
      <div>
        <h1 className='text-center'>Movie Finder</h1>
        <input type='text' className='col-sm-11' id='searchBar' 
        onChange={ this.handleUpdateSearchTerm }/>
        <button type='button' id='getMovies' className='col-sm- 
        1'>Go!</button>
      </div>
    )
  }
}

MovieSearchContainer.propTypes = {
  store: PropTypes.object
}

这里是 reducer

export default function movieSearchReducer(state = defaultState, 
action) {
  const { type, payload } = action;

  switch(type){
    case 'UPDATE_SEARCH_TERM': {
      return {
        ...state,
        title: payload.title
      }
    }

    default: {
      return state;
    }
  }
}

我希望页面组件上搜索栏的更改会反射(reflect)在 redux 存储中，但我只是收到此错误

Answer 1

dispatch Prop 仅在您直接与 redux-store 交互时可用。当您定义诸如 mapDispatchToProps() 之类的东西并将其作为第二个参数传递给 connect() 时，dispatch 会传递给 mapDispatchToProps ()。

const mapDispatchToProps = (dispatch) => {
    return{
      actionCreator: (arg) => {
         dispatch(actionCreator(arg))
      }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Component)

如果您不想定义 mapDispatchToProps()，您可以通过将一个对象作为第二个参数传递给 connect() 来有效地绑定(bind)您的 Action 创建者。这将 dispatch 隐式绑定(bind)到 action-creators:

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { updateSearchTerm, getMovies } from "./movieSearchActions";

class MovieSearchContainer extends React.Component {
  constructor(props) {
    super(props);

    this.handleUpdateSearchTerm = this.handleUpdateSearchTerm.bind(this);
  }

  handleUpdateSearchTerm(event) {
    const { value } = event.target;
    this.props.updateSearchTerm(value);
  }

  render() {
    console.log(this.props.movies);
    return (
      <div>
        <h1 className="text-center">Movie Finder</h1>
        <input
          type="text"
          className="col-sm-11"
          id="searchBar"
          onChange={this.handleUpdateSearchTerm}
        />
        <button
          type="button"
          id="getMovies"
          className="col-sm- 
        1"
        >
          Go!
        </button>
      </div>
    );
  }
}

MovieSearchContainer.propTypes = {
  store: PropTypes.object
};

const mapStateToProps = state => {
   return {
     title: state.movieSearch.title,
     year: state.movieSearch.year,
     plot: state.movieSearch.plot,
     released: state.movieSearch.released,
     runtime: state.movieSearch.runtime,
     genre: state.movieSearch.genre,
     plot: state.movieSearch.plot,
     ratings: {
     IMDB: state.movieSearch.ratings.IMDB,
       Metascore: state.movieSearch.ratings.Metascore
     },
     posterUrl: state.movieSearch.posterUrl,
     cachedMovies: state.movieSearch.cachedMovies
   };
 };


export default connect(
  mapStateToProps,
  {
    updateSearchTerm,
    getMovies
  }
)(MovieSearchContainer);

这样一来，您无需显式调用 dispatch 即可使用您的 action-creator。只需使用 this.props.nameOfActionCreator()

参见沙箱示例:https://codesandbox.io/s/simple-redux-7s1c0