CODEWITHSUNDEEP
reactjsredux
Silvère Lestang
Silvère Lestang

Reputation: 33

What are drawbacks of using a single mapDispatchToProps?

I try to follow the rules of the Redux documentation about presentational/container components and I connect my containers using react-redux connect(). I use mapDispatchToProps and bindActionCreators to inject the required actions into a props call actions. I never use the second parameter ownProps.

As my app became more and more complex, I end up with a lot of mapDispatchToProps() (one for each container) that are almost identical; they bind all actions from almost all action creators.

So I was wondering: what will be the drawbacks to have only one mapDispatchToProps function that bind all actions and use it in each containers?

Something like that: 

import { bindActionCreators } from 'redux'

import * as EventsActionCreators from '../../actions/EventsActionCreators'
import * as TagsActionCreators from '../../actions/TagsActionCreators'
import * as UsersActionCreators from '../../actions/UsersActionCreators'


export default function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(
      {
        ...EventsActionCreators,
        ...TagsActionCreators,
        ...UsersActionCreators,
      },
      dispatch
    ),
  }
}

Upvotes: 3

Views: 444

Answers (1)

Nathan Hagen
Nathan Hagen

Reputation: 12810

If your application is simple enough to warrant this, then I would say go for it. The downsides I see, if any, have to do with your connects not being explicit about what actions will be available. To know whats available, you have to go check the definition of mapDispatchToProps.

That said, why even have this as a function? mapDispatchToProps can receive an object, so in your mapDispatchToProps.js, this would suffice:

import * as EventsActionCreators from '../../actions/EventsActionCreators'
import * as TagsActionCreators from '../../actions/TagsActionCreators'
import * as UsersActionCreators from '../../actions/UsersActionCreators'

export default {
  ...EventsActionCreators,
  ...TagsActionCreators,
  ...UsersActionCreators,
}

then

import mapDispatchToProps from './mapDispatchToProps';
import SomeComponent from './SomeComponent';
export ConnectedComponent = connect(null, mapDispatchToProps)(SomeComponent);

Upvotes: 2

Related Questions