React with Recompose with Redux

Over the past few months I've been using a library called recompose. It claims to be a react utility belt for function components and higher-order components, and it fulfills this claim exceedingly well!

I've previously talked about stateless functional components and how they have helped keep components small and more reusable. Functional components really shine with the help of recompose! I've been able to extract computed properties, display logic, and overall optimize my code and views!

Let's say we have a store of scientists and we need to display each scientists information.

We have a <Scientist/> stateless functional component that handles the displaying of the scientists information. This component shouldn't care about how or where it's scientists display data has come from.

Let's assume a redux store containing immutablejs data. So with react-redux we can get each scientists data and pass it to the view.

The problem here is that our view requires DOB pre-formated and a full url to work properly. We need to compute a few display properties before the data gets passed into the view.

This could be done either in the mapStateToProps function with connect, but that shouldn't be its concern. We could also just do that in the View, but the view should just be a presentational component('dumb' component).

Introducing recompose! This library gives us HOC's like withPropsOnChange that only update computed properties when one of the props it is 'watching' changes. Here is an example implementing it for our scientists.

This example also uses compose from recompose which 'composes multiple higher-order components into a single higher-order component.'

recompose is a react utility belt for function components and higher-order components

recompose has been an amazingly strong addition to projects both at work and at home. It has helped with testing, by pulling out computed property calculations into pure functions, and just moving logic out of the views to make them simpler.

Check it out and if you have questions just let me know! Have fun!