mergeProps

The mergeProps methods

The third parameter, mergeProps(), deals with a more special use case that we won’t often encounter. For the sake of completion, though, we’ll briefly explain it.

const mergeProps = (stateProps, dispatchProps, ownProps) => {
  // ...
};

The function receives the result of mapStateToProps as its first parameter, that of mapDispatchToProps as its second, and ownProps as its third. The return value is a new object whose properties are also passed via props to the component connected to the store.

The mergeProps() parameter can be powerful if you want to dispatch certain actions that depend on data from the state but do not use thunk middleware. It’s also possible to filter the actions based on the state so that a component would not receive a updateProfile() action if state.profile does not exist (meaning if a user is not logged in). However, such scenarios are usually solved more elegantly on the component level.