Reactjs 如何将多个ActionCreator包装成一个道具？

我得到以下错误：

未捕获类型错误：this.props.dispatch不是一个函数

以下是我的组件：

import React from 'react';
import PropTypes from 'prop-types';
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as jobTitleSkillsActions from '../../actions/jobTitleSkillsActions';
import SkillList from './SkillList';
import * as userPositionActions from '../../actions/userPositionActions';

class SkillPage extends React.Component {

  componentDidMount() {
    this.props.dispatch(userPositionActions.loadUserPositions());
    var job_title_id = this.props.user_positions[0].job_title_id;    this.props.dispatch(jobTitleSkillsActions.loadJobTitleSkills(job_title_id));
  }

.....

const mapStateToProps = state => {
  return {
    job_title_skills: state.job_title_skills,
    user_positions: state.user_positions
  };
};

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      userPositionActions: bindActionCreators(userPositionActions, dispatch),
      jobTitleSkillsActions: bindActionCreators(jobTitleSkillsActions, dispatch),
    }
  };
}

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

---

我在这里做错了什么？

由于您已经使用了

mapDispatchToProps

，

dispatch

将不能作为道具用于组件。由于您使用了

mapDisptachToProps

，作业操作将作为道具提供，您可以像这样使用它们

componentDidMount() {
    this.props.actions.userPositionActions.loadUserPositions());
    var job_title_id = this.props.user_positions[0].job_title_id;
    this.props.actions.jobTitleSkillsActions.loadJobTitleSkills(job_title_id));
  }

但是，您可以将其进一步简化为

function mapDispatchToProps(dispatch) {
  return bindActionCreators({userPositionActions, jobTitleSkillsActions}, dispatch)  
}

...


componentDidMount() {
    this.props.userPositionActions.loadUserPositions());
    var job_title_id = this.props.user_positions[0].job_title_id;
    this.props.jobTitleSkillsActions.loadJobTitleSkills(job_title_id));
  }

---

由于您提供了连接函数的

mapDispatchToProps

，调度不会作为道具传递给组件

您的componentDidMount代码应该如下所示：

componentDidMount() {
  const actions = this.props.actions
  actions.userPositionActions.loadUserPositions()
  var job_title_id = this.props.user_positions[0].job_title_id;
  actions.jobTitleSkillsActions.loadJobTitleSkills(job_title_id)
}

---

根据我的评论，这将是绑定多个子对象（相当于动作创建者）的正确语法：

function mapDispatchToProps(dispatch) {
    return {
        userPositionActions : bindActionCreators(userPositionActions, dispatch),
        jobTitleSkillsActions: bindActionCreators(jobTitleSkillsActions, dispatch),
    }
}

---

此示例无法正常工作<代码>bindActionCreators不会通过嵌套字段递归-它希望对象中的所有字段都是实际的操作创建者。您需要分别为

userPositionActions

和

jobTitleSkillsActions

调用

bindActionCreators

，或者将这两个集合合并到一个对象中，并将其传递给

bindActionCreators

@markerikson谢谢您指出这一点。你能不能提交一个答案，说明这一点，这样我就可以更新这个问题的正确答案？