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

Question

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

Answer 1

您首先需要传递 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();

Answer 2

来自 React Redux Official Documentation

为什么我的连接组件中没有 this.props.dispatch？

connect() 函数有两个主要参数，都是可选的。第一个 mapStateToProps 是您提供的一个函数，用于在商店发生变化时从商店中提取数据，并将这些值作为 props 传递给您的组件。第二个 mapDispatchToProps 是您提供的一个函数，用于使用商店的调度功能，通常是通过创建动作创建者的预绑定版本，这些版本将在调用它们时自动调度它们的动作。

如果你在调用connect()时没有提供自己的mapDispatchToProps函数，React Redux会提供一个默认版本，它只是return将dispatch函数作为prop。这意味着如果您确实提供了自己的函数，则不会自动提供 dispatch。如果你仍然希望它作为道具可用，你需要在你的 mapDispatchToProps 实现中明确 return 自己。

在 mapDispatchToProps 实施 returning dispatch 后问题得到解决

 const mapDispatchToProps = (dispatch) => ({
         handleClick: () => dispatch(alertActions.clear()),
         dispatch, //returning dispatch solves the issue
 });

注意：如果我们使用PropTypes不需要重新调整mapDispatchToProps

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

I am not able to use mapDispatchToProps in my React + Redux application

javascript

reactjs

react-native

redux