本文介绍了如何将多个 actionCreators 包装成一个 props?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我收到以下错误:

未捕获的类型错误: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);

我在这里做错了什么?

推荐答案

由于您已经使用了 mapDispatchToPropsdispatch 将不能作为 prop 提供给组件.由于您使用了 mapDisptachToProps,作业操作将作为道具提供,您可以像

Since you have already used mapDispatchToProps, dispatch wont be available to the component as a prop. Since you have used mapDisptachToProps, the jobs actions will be available as props and you can use them like

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));
  }

但是你可以进一步简化它

However you can simplify it further like

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));
  }

这篇关于如何将多个 actionCreators 包装成一个 props?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-10 06:55