在我的React + Redux应用程序中,我尝试使用mapDispatchToProps实用程序,但是每当我将其放入connect(mapStateToProps, mapDispatchToProps)时,它都会出现一条错误消息,提示Uncaught TypeError: dispatch is not a function at new ReduxApp (ReduxApp.js:42)

这可能是什么问题?
PS:下面是文件

ReduxApp.js

 import React from 'react';
 import { Router, Route } from 'react-router-dom';
 import { connect } from 'react-redux';

 import { history } from './_helpers';
 import { alertActions } from './_actions'

 class ReduxApp extends React.Component {

  constructor(props) {
      super(props);

      this.handleChange = this.handleChange.bind(this);
      const { dispatch } = this.props;

      dispatch(alertActions.success("hello world"));
  }

  handleChange(){

      this.props.dispatch(alertActions.clear());
  }

  render(){
     const { alert } = this.props;
     return(

      <div>

         <h1>{alert.message}</h1>
         <button onClick={this.handleChange}>clear</button> {/* this is working since this function is declared outside the mapDispatchToProps. */}
         <button onClick={this.props.handleClick}>clear</button>

      </div>

     );

   }

 }

 const mapStateToProps = (state) => ({
   alert : state.alert
 });

 const mapDispatchToProps = (dispatch) => ({
   handleClick: () => dispatch(alertActions.clear())
 });

 const connectedApp = connect(mapStateToProps, mapDispatchToProps)(ReduxApp); // when I add mapDispatchToProps in the connect(), I get thhe issue.
 export { connectedApp as ReduxApp }

最佳答案

您首先需要通过dispatch,因为使用mapDispatchToProps时它不可用(请参阅@gaeron Redux的创建者的此答案:https://github.com/reduxjs/react-redux/issues/255

const mapDispatchToProps = dispatch => ({
  handleClick: () => alertActions.clear(dispatch),
  dispatch,
});


既然dispatch的引用可用,请更新您的actionCreator以调度该操作:

alert.clear = dispatch => {
  // your logic
  dispatch(ALERT_CLEAR_ACTION) // or whatever you named your action
}


在您的组件中:

handleChange = () => this.props.handleClick();

关于javascript - 我无法在React + Redux应用程序中使用mapDispatchToProps,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51723078/

10-09 13:31