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 https://levelup.gitconnected.com/understanding-react-render-props-by-example-71f2162fd0f2 )

It looks like this:

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

or pass props implicitly using React.cloneElement:

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

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:

https://github.com/juliankrispel/redux-connector

Gist:

Connection Component Example

CodePen: