CODEWITHSUNDEEP
javascriptreactjsredux
Lushmoney
Lushmoney

Reputation: 480

Passing multiple actions to bindActionCreators

I can't seem to find a concrete answer to this question.

If I have a connected component, and I want to pass in multiple actions from different reducers:

import { actions as commonActions } from 'some/action/file';
import { actions as userActions } from 'another/action/file';

Can I use bindActionCreators like so in my mapDispatchToProps call...?

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators((commonActions, userActions), dispatch)
});

or must I have to pass them in like

actions: bindActionCreators({ ...commonActions, ...userActions }, dispatch);

They are passed in like the latter all across the app I work on, but I am going through cleaning and updating the app, and am looking to minimize anywhere I can. Is the former acceptable, or do they have to be passed in as destructured objects?

Thanks!

Upvotes: 2

Views: 2093

Answers (1)

Trcoxiv
Trcoxiv

Reputation: 11

You would want to use Object.assign:

return {
     actions: bindActionCreators(Object.assign({}, commonActions, userActions), dispatch) 
};

You could call the actions directly on the store so that you could remove the bindActionCreators: this.props.store.dispatch(sendMessage())

This article by Mark Erikson goes into more detail and provides alternatives to bindActionCreators as he advises not to use it.

Upvotes: 1

Related Questions