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.getApplication

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.

Answer 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 };
}