New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

this.props.dispatch is undefined if using mapDispatchToProps #255

Closed
elado opened this Issue Jan 15, 2016 · 5 comments

Comments

5 participants
@elado

elado commented Jan 15, 2016

Is this on purpose? I know I can bring it back myself but wouldn't it be better if it's attached all the time?

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Jan 15, 2016

Collaborator

I don't think it would be better.
Usually you'd use mapDispatchToProps to hide Redux from the component you're wrapping.
Always exposing dispatch means there's no way to abstract Redux away from presentational components.

Indeed, you can bring it back yourself :-). It's just that default mapDispatchToProps is dispatch => ({ dispatch }), if you provide a custom one, it's entirely up to you what to put there.

Collaborator

gaearon commented Jan 15, 2016

I don't think it would be better.
Usually you'd use mapDispatchToProps to hide Redux from the component you're wrapping.
Always exposing dispatch means there's no way to abstract Redux away from presentational components.

Indeed, you can bring it back yourself :-). It's just that default mapDispatchToProps is dispatch => ({ dispatch }), if you provide a custom one, it's entirely up to you what to put there.

@gaearon gaearon closed this Jan 15, 2016

@tnrich

This comment has been minimized.

Show comment
Hide comment
@tnrich

tnrich Nov 9, 2016

@gaearon , I'm not sure I quite follow, how do we get dispatch passed into our component that also uses the mapDispatchToProps argument?

Thanks!

tnrich commented Nov 9, 2016

@gaearon , I'm not sure I quite follow, how do we get dispatch passed into our component that also uses the mapDispatchToProps argument?

Thanks!

@tnrich

This comment has been minimized.

Show comment
Hide comment
@tnrich

tnrich Nov 9, 2016

Hmm, I think I found a way:

export default connect(
(state) => {
  var productType = state.productType
  return {
    productType
  }
}, function (dispatch, props) {
  return {
    dispatch,
    ...bindActionCreators({
    ...veActions
  }, dispatch)
  }
}
)(SelectProductModalInner)

Is this the recommended way to both bind action creators to dispatch as well as get the dispatch function in your component?

Thanks!

tnrich commented Nov 9, 2016

Hmm, I think I found a way:

export default connect(
(state) => {
  var productType = state.productType
  return {
    productType
  }
}, function (dispatch, props) {
  return {
    dispatch,
    ...bindActionCreators({
    ...veActions
  }, dispatch)
  }
}
)(SelectProductModalInner)

Is this the recommended way to both bind action creators to dispatch as well as get the dispatch function in your component?

Thanks!

@markerikson

This comment has been minimized.

Show comment
Hide comment
@markerikson

markerikson Nov 9, 2016

Contributor

@tnrich : yep, that looks correct. My personal opinion is that components generally shouldn't actually reference dispatch directly (per my article Why Use Action Creators? ), but if you want both dispatch and bound action creators, that's how you'd do it.

Contributor

markerikson commented Nov 9, 2016

@tnrich : yep, that looks correct. My personal opinion is that components generally shouldn't actually reference dispatch directly (per my article Why Use Action Creators? ), but if you want both dispatch and bound action creators, that's how you'd do it.

@junedchhipa

This comment has been minimized.

Show comment
Hide comment
@junedchhipa

junedchhipa Jan 4, 2017

Following tnrich's answer, if I don't use spread operator, and pass dispatch as an argument like this, it still works.
function mapDispatchToProps(dispatch) { return { dispatch, someActions:bindActionCreators(someActions, dispatch) } }

Is using a spread operator mandatory here like this?
function mapDispatchToProps(dispatch) { return { dispatch, someActions: bindActionCreators({ ...someActions }, dispatch) } }

junedchhipa commented Jan 4, 2017

Following tnrich's answer, if I don't use spread operator, and pass dispatch as an argument like this, it still works.
function mapDispatchToProps(dispatch) { return { dispatch, someActions:bindActionCreators(someActions, dispatch) } }

Is using a spread operator mandatory here like this?
function mapDispatchToProps(dispatch) { return { dispatch, someActions: bindActionCreators({ ...someActions }, dispatch) } }

@reduxjs reduxjs deleted a comment from rogercamara May 31, 2018

@reduxjs reduxjs locked as resolved and limited conversation to collaborators May 31, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.