reactjs - Redux Action尚未调度

我正在研究react-redux应用程序。现在，我在派遣行动时遇到了问题。以下代码无法调度generateReport操作。

import React, { Component } from "react";
import { Button, Icon } from "semantic-ui-react";
import { connect } from "react-redux";
import { submit, getFormValues, isValid } from "redux-form";
import { generateReport } from "../actions/generateActions";
import { Link } from "react-router-dom";

const docsButtonStyle = {
  position: "fixed",
  marginBottom: "0.5em",
  marginLeft: "0.1em",
  bottom: 0,
  left: 0,
  animation: "back-to-docs 1.5s ease-in-out infinite",
  zIndex: 6
};

class ButtonGroup extends Component {
  generate = () => {
    this.props.generateReport(this.props.values);
  };

  render() {
    return (
      <div style={docsButtonStyle}>
        <Button.Group vertical>
          <Button animated="fade" color="teal" onClick={this.generate}>
            <Button.Content hidden>Generate</Button.Content>
            <Button.Content visible>
              <Icon name="chart bar" size="large" />
            </Button.Content>
          </Button>
        </Button.Group>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  values: getFormValues("privateForm")(state),
  valid: isValid("privateForm")(state)
});

const mapDispatchToProps = dispatch => ({
  generateReport,
  remoteSubmit: () => {
    dispatch(submit("privateForm"));
  }
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ButtonGroup);

generateActions.js

export const generateReport = values => async dispatch => {
  console.log("test");
  try {
    dispatch(generateReportBegin());
    const response = await axios.post(`${ROOT_URL}/submit`, values);
    dispatch(generateReportSuccess());
  } catch (error) {

  }
};

如果我将连接功能更改为

export default connect(
  mapStateToProps,
  {generateReport}
)(ButtonGroup);

有用。谁能告诉我为什么它在第一种情况下不起作用？谢谢。

最佳答案

发生这种情况的原因是connect函数depending of passed自变量mapDispatchToProps的行为不同


如果传递函数，它将以dispatch作为第一个参数调用，并且结果对象将合并到props。在这种情况下，假定您在提供的函数中为每个操作准备了dispatch调用。

在代码中

const mapDispatchToProps = dispatch => ({
    generateReport,
    remoteSubmit: () => {
        dispatch(submit("privateForm"));
    }
});

mapDispatchToProps将以dispatch作为参数调用，并产生具有2个函数的对象。 remoteSubmit应该正确工作，因为它绑定到dispatch。但是generateReport只是一些按原样传递的外部函数。因此，对this.props.generateReport的任何调用都将以dispatch作为参数返回正则函数。 Redux相信您已经准备好在mapDispatchToProps中进行分派所需的一切，因此它什么也不做。
如果将对象作为mapDispatchToProps传递（第二个示例中的操作），connect将为您调用bindActionCreators并将generateReport包装在dispatch调用内。这样就可以了。


为了使这两个动作同时起作用，您应该将所有动作创建者包装在dispatch调用中。

可能的方法

const mapDispatchToProps = dispatch => ({
    generateReport: bindActionCreators(generateReport, dispatch),
    remoteSubmit: () => {
        dispatch(submit("privateForm"));
    }
});

另一种方式

const mapDispatchToProps = dispatch => ({
    generateReport: (value) => dispatch(generateReport(value)),
    remoteSubmit: () => {
        dispatch(submit("privateForm"));
    }
});

或使用包含所有动作创建者的一个对象调用mapDispatchToProps。在这种情况下，connect将为您呼叫bindActionCreators。

const mapDispatchToProps = {
    generateReport,
    remoteSubmit: () => submit("privateForm")
    }

关于reactjs - Redux Action尚未调度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56299550/