How To Use Redux with React Hooks

With the release of React Redux 7.1.0, we can now use hooks, which offer a modern approach to working with React. Hooks help us write less code while achieving the same functionality. This means we can build our applications faster and more efficiently.

If you’re new to hooks, check out my earlier tutorial, Demystifying React Hooks. It will give you a solid understanding of how hooks work.

Refactoring a Redux Component to Use Hooks

Let’s start with a simple Redux component that uses the traditional class-based approach. We’ll refactor it to use React hooks.

1
import React, { Component } from "react";
2
import { connect } from "react-redux";
3
import { toggleSwitch } from "./UiReducer";
4

5
class Toggle extends Component {
6
  render() {
7
    const { ui, toggleSwitch } = this.props;
8
    return (
9
        <input
10
          type="checkbox"
11
          checked={ui.toggle}
12
          onChange={toggleSwitch}
13
        />
14
    );
15
  }
16
}
17

18
const mapStateToProps = ({ ui }) => ({
19
  ui
20
});
21

22
export default connect(
23
  mapStateToProps,
24
  { toggleSwitch }
25
)(Toggle);

Step 1: Convert to a Functional Component

We’ll start by converting the class component to a functional component. This change makes the code shorter and more readable:

1
import React from "react";
2

3
const Toggle = ({ ui, toggleSwitch }) => (
4
  <input
5
    type="checkbox"
6
    checked={ui.toggle}
7
    onChange={toggleSwitch}
8
  />
9
);
10

11
export default Toggle

In this version, we use a functional component instead of a class. We also directly destructure ui and toggleSwitch from the function parameters.

Step 2: Use useSelector to Access State

To read the state from Redux, we use the useSelector hook:

1
import React from "react";
2
import { useSelector } from 'react-redux';
3

4
const Toggle = () => {
5
  const ui = useSelector(state => state.ui);
6
  return (
7
    <input
8
      type="checkbox"
9
      checked={ui.toggle}
10
      onChange={toggleSwitch}
11
    />
12
  );
13
};
14

15
export default Toggle

Here, useSelector replaces mapStateToProps. It provides access to the Redux state directly.

Step 3: Use useDispatch to Dispatch Actions

To dispatch actions, we use the useDispatch hook:

1
import React from "react";
2
import { useSelector, useDispatch } from 'react-redux';
3

4
const Toggle = () => {
5
  const ui = useSelector(state => state.ui);
6
  const dispatch = useDispatch();
7

8
  const toggleSwitch = () => {
9
    dispatch({ type: 'TOGGLE' });
10
  };
11

12
  return (
13
    <input
14
      type="checkbox"
15
      checked={ui.toggle}
16
      onChange={toggleSwitch}
17
    />
18
  );
19
};
20

21
export default Toggle

With useDispatch, we can call dispatch to send actions. In this case, we dispatch the TOGGLE action when the checkbox is toggled.

Congratulations! You have successfully refactored your component from a class-based approach to using hooks. Be sure to test the component to make sure it works as expected.