Bind action parameters in mapDispatchToProps

Question

I have a submit button that will dispatch an action. The action's payload is the post data that will be sent to an API. Currently I use bindActionCreators in mapDispatchToProps:

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

then in my component I bind onClick to the submit action:

<input type="submit" onClick={() => this.props.actions.submit(this.props.postData)} />

I don't like that I have to give this component the post data in mapStateToProps. I'd prefer to just give the component an action that already has the post data binded to the submit function so it's usage would look like this:

<input type="submit" onClick={this.props.submit} />

Is this possible? I don't have access to the state in mapDispatchToProps

Answer 1

There is a third argument called mergeProps in connect method of react-redux which is supposed to be used in cases like one you just described. In your case you can do something like:

const mapStateToProps = state => ({ postData: ... });

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

const mergeProps = (stateProps, dispatchProps) => ({
  submit: () => dispatchProps.actions.submit(stateProps.postData),
});

const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps, mergeProps)(Component);

Note that Component will not receive actions nor postData, just submit.