This.props.dispatch not a function - React-Redux
Solution 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.
Solution 2
As you mentioned in your question, mapDispatchToProps
should be the second argument to connect
.
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);
After you do this, then this.props.getApplications
will be bound.
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
.
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 };
}
richTheCreator
Updated on July 09, 2022Comments
-
richTheCreator almost 2 years
I am trying to dispatch an action from within my smart component. I've tried to use the
mapDispatchToProps
andthis.props.dispatch(actions.getApplications(1))
but neither is binding the actions toprops
.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> )} }
-
richTheCreator about 8 yearsThanks for the quick response, I've tried your solution as well but dispatch still doesn't show up as a
prop
. -
Interrobang about 8 yearsAre you specifically wanting to use
dispatch
generically? Or do you want your other action to be bound. If the former, I can update the answer. -
richTheCreator about 8 yearsI am wanting to dispatch an action so that it will be ran through the reducers.
-
Interrobang about 8 yearsSo normally you would use a bound action instead of manually calling
this.props.dispatch
. Are you wanting to manually generate an action? -
richTheCreator about 8 yearsYes I'd like to generate an action on component render
-
richTheCreator about 8 yearsthanks for the response. My
mapDispatchToProps
returns thebindActionCreators
-
stackdave about 6 yearslooks this way return bindActionCreators ({getApplications}, dispatch ); you can do it too
-
Drew2 about 6 yearsWhat about when you want to have have BOTH bound action creators and
this.props.dispatch
available and your mapDispatchToProps is an object instead of a function?