Found this question somewhere on web and happens to be my question as well. Which method do you use and why?
function mapDispatchToProps(dispatch){
return {
onDeleteFlashMessage : bindActionCreators(deleteFlashMessage, dispatch),
<!-- OR THIS -->
onDeleteFlashMessage : (id) => {
dispatch(deleteFlashMessage(id));
}
};
}
I use code like in your second example. I don't really have any strong reasons. Sure, functional programming is cool but bindActionCreators seems unnecessary to me; and sometimes the action isn't as straight forward as passing in the parameter (id in your example).
But also, I write in an ES6 style because it's slightly more compact:
const mapDispatchToProps = dispatch => ({
onDeleteFlashMessage: id => dispatch(deleteFlashMessage(id))
})
Mark Erikson
I write code :)
FYI,
connectsupports a shorthand syntax for method binding. Just pass an object full of action creators instead of amapDispatchfunction, and you will get those action creators bound up, as props. For example:const actions = {onDeleteFlashMessage : deleteFlashMessage}); export default connect(null, actions)(MyComponent);Overall, I prefer to define separate action creators outside of
mapDispatch, and bind them using the shorthand syntax. That also makes the functions more reusable and testable.I talk about this a bit in my blog post on Idiomatic Redux: Why Use Action Creators?.