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