react-redux connect pattern to avoid unknown props warning with dispatch?

Question

dispatch is automatically passed as a prop when you use connect(mapStateToProps)(Component). I'm not always using dispatch in my connected components and React 15.2 throws a warning if my connected component passes it along to its children.

Simple example:

const Color = ({ color, ...props }) => <div {...props}>{color}</div>;

const CurrentColor = connect(getColorFromState)(Color);

Now if I use the CurrentColor component anywhere it will throw an error because dispatch is passed along. Is there a pattern I can use to avoid this? The only thing I could come up with was connect(mapStateToProps, () => ({}))(Component) to override passing dispatch.

Answer 1

I just solved the same issue. The dispatch prop is there because you are not providing mapDispatchToProps when you call connect(). You can therefore provide a dummy function to stop that prop being added:

export default connect( mapStateToProps, () => ({}) )(MyPage)