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

问题描述

我正在尝试从我的智能组件中分派一个动作.我尝试使用 mapDispatchToProps 和 this.props.dispatch(actions.getApplications(1)) 但都没有将动作绑定到 props>.

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

推荐答案

根据 此处，this.props.dispatch 在默认下可用，如果您不提供自己的mapDispatchToProps函数.如果你确实提供了一个 mapDispatchToProps 函数，你有责任自己返回一个名为 dispatch 的道具:

Per the Redux FAQ question at here, this.props.dispatch is available by default if you do not supply your own mapDispatchToProps function. If you do supply a mapDispatchToProps function, you are responsible for returning a prop named dispatch yourself:

const mapDispatchToProps = dispatch => ({
   ...other methods,
   dispatch                // ← Add this
})

export default connect(null, mapDispatchToProps)(Component)

或者，您可以使用 Redux 的 bindActionCreators 实用程序，无需担心在组件中使用 this.props.dispatch.

Or, you can make sure your action creators are pre-bound using Redux's bindActionCreators utility, and skip having to worry about using this.props.dispatch in your component.

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