我无法在React + Redux应用程序中使用mapDispatchToProps

马杜

在我的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 }
t3__rry

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

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

更新您的actionCreator,以在dispatch引用可用时调度该操作

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

在您的组件中:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我无法在reactjs应用程序中显示通知,我正在使用react-redux-notify

如果我要在我的React Native应用程序中使用Firebase,是否需要使用redux-persist?

将函数从 mapDispatchToProps 传递给 react/redux 应用程序中的容器组件

我无法在主应用程序中使用自动装配

我无法在JDBC Java应用程序中使用DriverManager

无法在我的Facebook应用程序中使用FQL

无法在我的应用程序中使用Barteksc PDF Viewer

如何使用Redux访问本地JSON文件以在整个React应用程序中使用?

如何在React Redux中使用mapDispatchToProps

在我的应用程序中使用DataTable

在我的应用程序中使用$ timeout

在React Redux应用程序中使用Jest模拟浅呈现的承诺

为什么我无法从 redux 获取状态到我的 React 应用程序?

在 React 应用程序中使用 ActiveMQ

Redux 在页面重新加载和我的应用程序中丢失状态,我无法使用 localStorage

在react-redux应用程序中使用上下文是否有意义?

在React-Redux应用程序中使用默认错误处理来管理API调用

使用酶测试 Redux + React 应用程序的问题:

我想在我的Angular Web应用程序中使用Azure应用程序服务的``应用程序设置''变量

无法使用 nginx 在 ReactJS 应用程序中使用 CORS

我在我的应用程序中使用Zxing库

我可以在Redux中使用没有mapStateToProps的mapDispatchToProps吗?

为什么我不能在我的基本 React 应用程序中使用 promise?

我可以在我的React应用程序中使用window.localStorage吗?

了解如何在 react-redux 中使用 mapDispatchToProps?

我无法在 react redux 中使用 useSelector 返回数据

这个React应用程序太简单了以至于无法使用Redux吗?

无法使用 React 和 Redux 从自定义组件更新应用程序状态

我应该使用Redux store.subscribe()还是用react-redux <Provider>包装我的应用程序?