javascript - This.props.dispatch not a function - React-Redux

Question

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.

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

question from:https://stackoverflow.com/questions/36850988/this-props-dispatch-not-a-function-react-redux

Answer 1

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)

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.