Convert Redux to Hooks

In this article, I will try to explain how you can use Redux with React Hooks.

React Redux gave support for Hooks in version 7.1 which was released on 11th June, 2019. It means that you can use Redux with Hooks in your functional component instead of using connect higher order component (HOC).

What are Hooks?

Just to refresh a little about hooks, hooks were introduced in React version 16.8 and it allows you to access state and life cycle methods in functional components.

Let’s have a look at an example.

React class component like this:

class Count extends React.Component {
  state = {
    count: 0
  };
  add = () => {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick?={this.add}>Add</button>
      </div>
    );
  }
}

Can be written as a function component using Hooks like this:

const Count = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick?={() => setCount(count + 1)}>Add</button>
    </div>
  );
};

If you want to explore more about hooks, I would suggest you to go through the detailed docs on hooks.

Back to Business:

Original purpose of this article is to explain how we can use Redux with Hooks.

React Redux now offers useSelector and useDispatch hooks that can be used instead of connect.

useSelector is alternative to connect’s mapStateToProps. You pass it a function that takes the Redux store state and returns the state which you need.

useDispatch replaces connect’s mapDispatchToProps. All it does is return your store’s dispatch method so you can manually dispatch actions.

Enough theory? Alright let’s have a look at real-time example in which we will convert a React component that used connect into one that uses Hooks.

Using connect:

import React from "react";
import { connect } from "react-redux";
import { addCount } from "./store/counter/actions";
export const Count = ({ count, addCount }) => {
  return (
    <>
      <div>Count: {count}</div>
      <button onClick?={addCount}>Count</button>
    </>
  );
};
const mapStateToProps = state => ({
  count: state.counter.count
});
const mapDispatchToProps = { addCount };
export default connect(mapStateToProps, mapDispatchToProps)(Count);

Now, with the new React Redux Hooks instead of connect:

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { addCount } from "./store/counter/actions";
export const Count = () => {
  const count = useSelector(state => state.counter.count);
  const dispatch = useDispatch();
  return (
    <>
      <div>Count: {count}</div>
      <button onClick?={() => dispatch(addCount())}>
        Count
      </button>
    </>
  );
};

As you can see, code is precise, fewer in lines means better performance, easier to read, easier to understand and of-course easier to test.

Another benefit of not using the higher-order component is that you no longer get this “Virtual DOM chaining”:

Now you have basics of Hooks and how to use them with Redux, time to get your hands dirty with the detailed documentation.

You learnt something new today? Comments and feedback always make the writer happy ;)

About the Author:

Having 7+ years of professional software development experience in various cutting edge technologies, currently working as a Principal Software Engineer in a silicon valley based company in full stack capacity using ReactJs and Apollo-GraphQL. I love to write about technology and share my professional experience with everyone.