Roll your own Provider and connect with recompose
connect concepts provided by higher-order components in many state management libraries are one of my favorite conveniences of React. I haven’t come across a bad version of any of these, and I don’t really see the need to write another one. That being said I think the subject provides a good opportunity to demonstrate utilizing context with the
getContext higher-order components from recompose.
Now we have a simple
Provider with an accompanying
connect. We’re obviously lacking some of the magic of the
connect higher-order component, but all the basics are there. Let’s look at how we’d use this.
That’s simple enough. The
context will contain the
props of the
Provider, and a component wrapped in
connect will receive those
props in the form of the
That’s cool, but what about the
mapStateToProps concept? That’s easily accomplished with the
mapProps, we spread the
props of the parent component, and merge them with the
props returned by our
mapStateToProps function. It’s not perfect as it currently requires a
mapStateToProps argument to prevent
undefined is not a function, but I think the basic idea is clear.
I don’t think there is really any reason to replace the
connect higher-order components provided by whatever state management library you use, but as an exercise in how recompose can simplify complex topics such as
context I think these concepts are a great learning tool.
There is always the possibility you use some form of state management that doesn’t provide these higher-order components, and in that case recompose can be really helpful.
Thanks for reading!
Edit: I had a major error in my code in the original version of this article, it’s important to note that the component wrapped by
withContext should render it’s
children, sorry about that!