This.props.dispatch不是一个函数 - React-Redux [英] This.props.dispatch not a function - React-Redux

问题描述

我正在尝试从我的智能组件中发出一个动作。我试图使用 mapDispatchToProps 和 this.props.dispatch（actions.getApplications（1））将操作绑定到道具。

I am trying to dispatch an action from within my smart component. I've tried to use the mapDispatchToProps and this.props.dispatch(actions.getApplications(1)) but neither is binding the actions to props.

我不知道是不是因为我的 mapStateToProps 不包括在内？我试图加入它，但是它也不起作用。

Im not sure if it is because my mapStateToProps is not included? I tried to include it but it did not work either.

请注意，对于以下代码块的长度，我们深表歉意。

Any help is appreciated, I apologize for the length of the code block below.

import classNames from 'classnames';
import SidebarMixin from 'global/jsx/sidebar_component';

import Header from 'common/header';
import Sidebar from 'common/sidebar';
import Footer from 'common/footer';
import AppCard from 'routes/components/appCard';
import { getApplications } from 'redux/actions/appActions';

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import actions from 'redux/actions';
import { VisibilityFilters } from 'redux/actions/actionTypes';


class ApplicationContainer extends React.Component {
    constructor(props){
    super(props)

    this.state = {
      applicants: []
    }

    this.onDbLoad = this.onDbLoad.bind(this)

  }
  onDbLoad(){
    console.log(this.props.dispatch)
     // this.props.getApplications(1)
  }

    render() {
    return (
        <Col sm={12} md={4} lg={4}>
            <PanelContainer style={panelStyle}>
                <Panel>
                    <PanelBody >
                        <Grid>
                            <Row>
                              { this.onDbLoad() }
                            </Row>
                      </Grid>
                    </PanelBody>
                </Panel>
            </PanelContainer>
        </Col>
    )}
}


function mapDispatchToProps(dispatch){

  return bindActionCreators({ getApplications: getApplications },dispatch)
}

export default connect(null, mapDispatchToProps)(ApplicationContainer);

@SidebarMixin
export default class extends React.Component {

    render() {
    const app = ['Some text', 'More Text', 'Even More Text'];

        var classes = classNames({
            'container-open': this.props.open
        })
        return (
            <Container id='container' className={classes}>
                <Sidebar />
                <Header />
        <Container id='body'>
          <Grid>
            <Row>
              <ApplicationContainer />
            </Row>
          </Grid>
        </Container>
                <Footer />
            </Container>
    )}
}

推荐答案

正如您在问题中提到的那样， mapDispatchToProps 应该是第二个参数连接。

As you mentioned in your question, mapDispatchToProps should be the second argument to connect.

如果没有任何状态映射完成，可以通过 null 作为第一个参数：

If you don't have any state mapping to be done, you can pass null as the first argument:

export default connect(null, mapDispatchToProps)(ApplicationContainer);

执行此操作后， this.props.getApplications 将被绑定。

After you do this, then this.props.getApplications will be bound.

根据您的评论，如果您想访问 this.props.dispatch INSTEAD的绑定操作，只需调用 connect（）而不传递任何映射器，默认行为将注入 dispatch 。

As per your comment, if you want to have access to this.props.dispatch INSTEAD of binding actions, simply call connect() without passing any mappers, and the default behavior will inject dispatch.

如果你想拥有BOTH绑定的动作创建者和 this.props.dispatch ，您需要向您传递给 mapDispatchToProps 的对象添加一个 dispatch 。像 dispatch：action =>动作。或者，由于您并没有将所有内容都放在根密钥（例如 actions ）下，您可以执行以下操作：

If you want to have BOTH bound action creators and this.props.dispatch, you need to add a dispatch to the object that you pass to mapDispatchToProps as well. Something like dispatch: action => action. Or, since you're not putting everything under a root key (like actions), you could do:

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

这篇关于This.props.dispatch不是一个函数 - React-Redux的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！