Redux Action 没有被分派

Question

我正在开发一个 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);

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

Answer 1

这是由于 connect 函数 depending of passed 参数与 mapDispatchToProps 的不同行为所致

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

   在代码中

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

   mapDispatchToProps 将使用dispatch 作为参数调用，并生成具有 2 个函数的对象。 remoteSubmit 应该可以正常工作，因为它绑定到 dispatch。但是generateReport 只是一些按原样传递的外部函数。因此，在任何对 this.props.generateReport 的调用中，都将返回以 dispatch 作为参数的函数。 Redux 认为您已经准备好在 mapDispatchToProps 中调度所需的一切，因此它什么也不做。

1234563所以它起作用了。

要使这两个动作都起作用，您应该将所有动作创建者包装在 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")
    }