How to get simple dispatch from this.props using connect w/ Redux?

by

By default mapDispatchToProps is just dispatch => ({ dispatch }).
So if you don’t specify the second argument to connect(), you’ll get dispatch injected as a prop in your component.

If you pass a custom function to mapDispatchToProps, you can do anything with the function.
A few examples:

// inject onClick
function mapDispatchToProps(dispatch) {
  return {
    onClick: () => dispatch(increment())
  };
}

// inject onClick *and* dispatch
function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    onClick: () => dispatch(increment())
  };
}

To save you some typing Redux provides bindActionCreators() that lets you turn this:

// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
  return {
    onPlusClick: () => dispatch(increment()),
    onMinusClick: () => dispatch(decrement())
  };
}

into this:

import { bindActionCreators } from 'redux';

// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    onPlusClick: increment,
    onMinusClick: decrement
  }, dispatch);
}

or even shorter when prop names match action creator names:

// injects increment and decrement
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ increment, decrement }, dispatch);
}

If you’d like you can definitely add dispatch there by hand:

// injects increment, decrement, and dispatch itself
function mapDispatchToProps(dispatch) {
  return {
    ...bindActionCreators({ increment, decrement }), // es7 spread syntax
    dispatch
  };
}

There’s no official advise on whether you should do this or not. connect() usually serves as the boundary between Redux-aware and Redux-unaware components. This is why we usually feel that it doesn’t make sense to inject both bound action creators and dispatch. But if you feel like you need to do this, feel free to.

Finally, the pattern you are using right now is a shortcut that’s even shorter than calling bindActionCreators. When all you do is return bindActionCreators, you can omit the call so instead of doing this:

// injects increment and decrement
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ increment, decrement }, dispatch);
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

can be written as this

export default connect(
  mapStateToProps,
  { increment, decrement } // injects increment and decrement
)(App);

However you’ll have to give up that nice short syntax whenever you want something more custom, like passing dispatch as well.

More Related Contents:

  1. Programmatically Navigate using react-router
  2. Why do we need middleware for async flow in Redux?
  3. When to use ES6 class based React components vs. functional ES6 React components?
  4. React Context vs React Redux, when should I use each one? [closed]
  5. Why is my onClick being called on render? – React.js
  6. Await is a reserved word error inside async function
  7. How to update single value inside specific array item in redux
  8. Why use Redux over Facebook Flux? [closed]
  9. Understanding React-Redux and mapStateToProps()
  10. Is this the correct way to delete an item using redux?
  11. React: how to load and render external html file?
  12. Is store.dispatch in Redux synchronous or asynchronous
  13. Updating nested data in redux store
  14. Cleaner/shorter way to update nested state in Redux?
  15. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  16. redux fetch body is not use with no cors mode
  17. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  18. How to sync Redux state and url hash tag params
  19. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  20. How to trigger off callback after updating state in Redux?
  21. Changing the layout of a component depending on Redux state
  22. Cannot update a component while rendering a different component warning
  23. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  24. Programmatically change Redux-Form Field value
  25. having multiple instance of same reusable redux react components on the same page/route
  26. Update single value in item array | react redux
  27. How can I dispatch function in redux?
  28. Component won’t update when a redux state change occurs
  29. React-Redux: Should all component states be kept in Redux Store
  30. Could not find “store” in either the context or props of “Connect(App)”

Leave a Comment