Transform a Classic Redux Component into React Hooks – Step‑by‑Step Guide

Simple Redux Component

The original component is a class‑based Redux connected component that renders a checkbox bound to a toggle boolean in the Redux store.

Step 1 – Refactor the class component to a function component

Import React, the toggleSwitch action, and replace the class with a functional component that receives ui and toggleSwitch via props.

import React from "react";
import { connect } from "react-redux";
import { toggleSwitch } from "./UiReducer";

const Toggle = ({ ui, toggleSwitch }) => (
  <div>
    <div>{JSON.stringify(ui)}</div>
    <input type="checkbox" value={ui.toggle} onChange={toggleSwitch} />
  </div>
);

const mapStateToProps = ({ ui }) => ({ ui });

export default connect(mapStateToProps, { toggleSwitch })(Toggle);

Step 2 – useSelector

Replace mapStateToProps with the useSelector hook to read the ui slice directly inside the functional component.

import React from "react";
import { useSelector, connect } from "react-redux";
import { toggleSwitch } from "./UiReducer";

const Toggle = ({ toggleSwitch }) => {
  const ui = useSelector(state => state.ui);
  return (
    <div>
      <div>{JSON.stringify(ui)}</div>
      <input type="checkbox" value={ui.toggle} onChange={toggleSwitch} />
    </div>
  );
};

export default connect(null, { toggleSwitch })(Toggle);

Step 3 – useDispatch

Introduce the useDispatch hook to dispatch actions directly, removing the need for the connect HOC for the action.

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { TOGGLE } from "./UiReducer";

const Toggle = () => {
  const ui = useSelector(state => state.ui);
  const dispatch = useDispatch();
  return (
    <div>
      <div>{JSON.stringify(ui)}</div>
      <input
        type="checkbox"
        value={ui.toggle}
        onChange={() => dispatch({ type: TOGGLE })}
      />
    </div>
  );
};

export default Toggle;

The final component is a pure functional component that uses useSelector to read state and useDispatch to toggle the boolean value.

Summary

By converting the class component to a function component and leveraging useSelector and useDispatch, the Redux logic becomes more concise and aligns with React's latest best practices.