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的{{1}}函数depending of passed参数的不同行为

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

使用代码
```
dispatch
```
const mapDispatchToProps = dispatch => ({ generateReport, remoteSubmit: () => { dispatch(submit("privateForm")); } });将以mapDispatchToProps作为参数调用，并产生具有2个函数的对象。 dispatch应该正确工作，因为它已绑定到remoteSubmit。但是dispatch只是一些按原样传递的外部函数。因此，在对generateReport的任何调用中，将以this.props.generateReport作为参数返回正函数。 Redux相信您已经在dispatch中准备了分发所需的一切，因此它什么也没做。
如果将对象作为mapDispatchToProps传递（第二个示例中的操作），则mapDispatchToProps将为您调用bindActionCreators并将connect包裹在{{ 1}}呼叫。这样就可以了。

要使这两个动作同时起作用，应将所有动作创建者包装在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

Redux Action尚未调度

1 个答案: