Use React hooks to connect your Redux store and your components

Fernando Abolafio
Nov 20, 2019 · 5 min read

Say goodbye to HOCs or connectors and welcome the React hooks era

Outline:

Can Rect hooks and Redux coexist?

I will say it, React hooks and Redux can and should coexist. Especially when you already have Redux holding your application state, there is no reason to drop it off and start from scratch just because you can write a reducer using hooks. Let redux do what it does best and instead, focus on the integration between your app state and the components.

Redux is great by managing state! You got middlewares such as redux-thunk, a damn good debugging tool for chrome, composition of reducers and thousands of articles about it around the web.

TL;DR: Focus on the integration between your app state and the components

One desired output for our React apps is to have our components as dumb as possible. This means to have less logic done inside the component as possible, in a way that it only depends on its props in order to result in different outputs.

Dumb components are almost a representation of the DOM. It’s very reusable and very easy to understand what is going on.

Now, imagine that your component needs to compute some data from the app state before rendering. Without hooks you have basically two options:

Both of these options works well and they got the job done so far. The problem is that in both cases you end up with a huge mix of Component code (e.g jsx) and core logic code which is harder to maintain as the complexity of your application grows and it is also less reusable. I won't go into more detail about that. If you're convinced enough that React hooks can bring fresh air in this process follow along to the next section. If you're not, just keep reading it anyway.

Connecting components using hooks

In order to illustrate how you can connect your component using React hooks, we will create a simple todo list which fetches the data dynamically and also a detail view for a single todo. I will use the library react-redux which offers us a set of very handful hooks.

There are basically 2 hooks from this library we are going to use and another one which is a customization of one of them.

The custom hook useAction:

This hook receives an action, binds it to the dispatch function and returns the boundAction. Pretty easy, right?

With that, we can finally start building our real hook useTodo:

This hook:

Let's see how easy is to have our component connected using this hook we just created:

If you want to go further and completely isolate the logic from the presentational component, you could split the component above into 2 components, a wrapper, and a dump component:

Conclusion

I have gone through the connectors and HOCs path in the past and I am loving the fresh air Reacr hooks brought. This "data hooks" (as I like to call) allows me to have all my data managing policy encapsulated into a reusable piece of code that can be shared and consumed in many ways across different components. I can write much simpler components and ensure that they are using the best data fetching policy available in the codebase. Thus avoiding unnecessary re-fetchings and re-renders. If you want to master this subject I strongly recommend you to go through the react-redux docs for hooks and also read more about memoized selectors.

The full source code used for this article can be found here:
https://codesandbox.io/s/usetodos-1yemp?fontsize=14&hidenavigation=1&theme=dark

Thanks for your time, I hope you enjoyed this reading.

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store