How to fix _this.props.dispatch is not a function in React.JS

When you got error _this.props.dispatch is not a function, you can try below things:

1) Convert the (handleSubmit) function to an arrow function so in that case, it won’t have its own this.

handleSubmit = (user) => { // ...logic here }

2) Create a constructor inside the component and do the next step:

this.handleSubmit = this.handleSubmit.bind(this)

In this case, you attach this to the function each time an instance is created.

3) When you call the method inside the render use the .bind() to bind this:

onSubmit={(user) => this.handleSubmit.bind(this, user)}

If not work:

Why don’t I have this.props.dispatch available in my connected component?

The connect() function takes two primary arguments, both optional. The first, mapStateToProps, is a function you provide to pull data from the store when it changes, and pass those values as props to your component. The second, mapDispatchToProps, is a function you provide to make use of the store’s dispatch function, usually by creating pre-bound versions of action creators that will automatically dispatch their actions as soon as they are called.

If you do not provide your own mapDispatchToProps function when calling connect(), React Redux will provide a default version, which simply returns the dispatch function as a prop. That means that if you do provide your own function, dispatch is not automatically provided. If you still want it available as a prop, you need to explicitly return it yourself in your mapDispatchToProps implementation.

How to fix:

Remove mapDispatchToProps,  yourconnect() Change to

export default connect(
mapStateToProps,
null
)(DashboardContainer);
then, use it directly:

this.props.dispatch(allActions.xxx());

 

Leave a Reply

Your email address will not be published. Required fields are marked *