TypeError: this.props.loginActionCreater 不是 react-redux 中的函数

Question

我是反应冗余的新手，我正在尝试在组件中调用两个操作。 点击按钮后有登录页面，我正在调用一个操作，该操作将获取auth_token然后在组件WillReceiveProps((中使用的令牌来调用另一个操作。

问题：当我单击按钮时，它会显示我在问题标题中提到的错误。

用户界面：

<Button
block
bsSize="large"
disabled={!this.validateForm()}
onClick={this.handleSubmit.bind(this)}
>
Login
</Button>

功能性：

import React, { Component } from 'react'
import { Button, FormGroup, FormControl, ControlLabel } from 'react- 
bootstrap';
import { loginActionCreater } from '../../actions/index';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchListOfCandidate } from 
'../../actions/FetchCandidateAction/FetchCandidateAction';
handleSubmit() {
this.props.loginActionCreater(this.state.email, this.state.password);
}
componentWillReceiveProps(nextProps) {
if (nextProps.token) {
this.props.fetchListOfCandidate(nextProps.token);
history.push('/HeaderComponents');
}
}

function mapStateToProps(state) {
return {
error: state.login.error,
token: state.login.token
}
}
function mapDispatchToProps(dispatch) {
return {
actions: {
loginActionCreater: bindActionCreators(loginActionCreater, dispatch),
fetchListOfCandidate: bindActionCreators(fetchListOfCandidate, dispatch)
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(LoginComponent);

如果我只是调度单个操作，它工作正常，但在调度两个操作时，它会显示标题中提到的错误。

这是我如何调度工作正常的单个操作：

function mapDispatchToProps(dispatch) {
return bindActionCreators({ loginActionCreater }, dispatch);
}

我做错了什么，如果有人知道，请纠正我。感谢您的任何帮助！

Answer 1

当您有两个操作时，问题出在mapDispatchToProps方法中。 看这里：

function mapDispatchToProps(dispatch) {
return {
actions: {
loginActionCreater: bindActionCreators(loginActionCreater, dispatch),
fetchListOfCandidate: bindActionCreators(fetchListOfCandidate, dispatch)
}
}
}

您正在返回一个对象，其中键action。 当您有一个操作时，您的mapDispatchToProps如下所示：

function mapDispatchToProps(dispatch) {
return bindActionCreators({ loginActionCreater }, dispatch);
}

它不返回带有键action的对象。

如果您想通过两个操作来保持mapDispatchToProps的实现。 请尝试像这样调用您的操作：

this.props.actions.loginActionCreater()

Answer 2

您正在将mapDispatchToProps函数与不必要的父对象一起使用，该父对象是actions。如果你想保持这个逻辑，那么你需要使用你的操作，比如：

this.props.actions.loginActionCreater()

当您想将多个动作创建者与bindActionCreators一起使用时，您可以简单地这样做：

function mapDispatchToProps(dispatch) {
return bindActionCreators({ loginActionCreater , fetchListOfCandidate }, dispatch)
}

通过此设置，您可以将动作创建者用作this.props.loginActionCreator。

顺便说一句，实际上你根本不需要bindActionCreators或mapDispatchToProps。如果你喜欢，有一个速记方法。像这样使用连接：

connect(mapStateToProps, { loginActionCreater , fetchListOfCandidate } )(LoginComponent);