Question

我正在尝试从连接到redux的react组件调用dispatch。无论出于何种原因，我都无法从此组件中调用this.props.dispatch。但是showPopup操作在组件中工作正常吗？

Reading the docs它表示只要您拥有connect()，就可以致电this.props.dispatch。我在这里缺少什么？

import React, { Component } from 'react';
import { connect } from 'react-redux';

// Actions
import { showPopup } from '../../../actions';

class Channels extends Component {
    render() {
        console.log(this.props.dispatch); // <- undefined (?)
        return <div>some stuff</div>;
    }
}

export default connect(null, { showPopup })(Channels);

更新1

以下是有效的，有没有办法缩短它？

function mapDispatchToProps(dispatch) {
    let actions = bindActionCreators({ showPopup });
    return { ...actions, dispatch };
}

更新2

export default connect(null, (dispatch) => bindActionCreators({ showPopup, dispatch }, dispatch))(Channels);

Answer 1

您的第一个代码只能将您的this.props.dispatch更改为this.props.showPopup。

如果您将第二个参数传递给connect方法，它会将这些操作映射为道具。 connect(null, { showPopup, otherAction, someAction })(Channels);，您可以使用this.props.showPopup()或this.props.otherAction或this.props.someAction来发送操作

如果您只是connect()(Channels);，那么您需要使用this.props.dispatch(showPopup(...))或this.props.dispatch(otherAction())或this.props.dispatch(someAction())

Answer 2

那是因为您将 mapDispatchToProps 定义为一个对象。

The documentation 说：

<块引用>

您的组件将不再作为道具接收调度

dispatch在连接组件中不可用

2 个答案: