Connection Component

Connection Component is a pattern for React / Redux

It’s a declarative redux “connection” component that provides props to any components inside the scope of the child function. (see render props )

It looks like this:

<Connection mapStateToProps={MSTP} mapDispatchToProps={MDTP}>
{props => <Count {…props} />}

or pass props implicitly using React.cloneElement:

<Connection mapStateToProps={MSTP} mapDispatchToProps={MDTP}>
<Count />

MSTP is a regular mapStateToProps state => ({ ... }), and MDTP is a regular mapDispatchToProps dispatch => ({ ... }).

Gussy it up however you like, the question is does it work? Seems to…

Is it fast / performant / efficient? No idea…

What I like about this pattern:

  • No (obvious) HOC’s
  • You know where “live” redux state is

What I don’t like about this pattern:

  • Non-standard (at least I’ve never seen it used anywhere)
  • Lacksconnect API parity (how to do options?) (maybe options is a code smell / anti-pattern anyway?)

Prior Art:


Connection Component Example