DEV Community

vinodchauhan7
vinodchauhan7

Posted on

7 3

Converting React-Redux Class Components to Hooks

With the advancement of day-to-day technology, React-Redux had also released hooks with its 7.1.0 version. So this means we also need to update ourselves with latest react practices.

React-Hooks

React Hooks helps us to write less code for the same functionality which we write earlier with class components. If you are new to React-hooks please have a look on my recent article on hooks.

In this post, we will convert our simple react-redux application which is currently using class based component approach into hooks with redux.

Here is basic codesandbox

View of Counter Class-Component

import React, { Component } from "react";
import { connect } from "react-redux";

class Counter extends Component {
  render() {
    return (
      <div>
        <h3>Count : {this.props.data.count}</h3>
        <p>
          <button
            onClick={() => this.props.dispatch({ type: "INC", value: 1 })}
          >
            INCREMENT
          </button>

          <br />
          <br />

          <button
            onClick={() => this.props.dispatch({ type: "DEC", value: 1 })}
          >
            DECREMENT
          </button>
        </p>
      </div>
    ); //return ends here
  } //render ends here
}

const mapsStateToProps = state => {
  return {
    data: state
  };
};

export default connect(mapsStateToProps)(Counter);

Now lets go step by step :

1) Convert 'Counter' class component to function component.

import React, { Component } from "react";
import { connect } from "react-redux";

const Counter = props => {
  return (
    <div>
      <h3>Count : {props.data.count}</h3>
      <p>
        <button onClick={() => props.dispatch({ type: "INC", value: 1 })}>
          INCREMENT
        </button>

        <br />
        <br />

        <button onClick={() => props.dispatch({ type: "DEC", value: 1 })}>
          DECREMENT
        </button>
      </p>
    </div>
  ); //return ends here
};

const mapsStateToProps = state => {
  return {
    data: state
  };
};

export default connect(mapsStateToProps)(Counter);

In above conversion, We have just made functional component and its already code seems very less.

2) Currently we are fetching data from our stores via the mapStateToProps() and
then wrapping our functional component with in connect HOC.

useSelector

useSelector hook help us to read state from stores. We need to import 'useSelector' from 'react-redux'

Import

import { connect, useSelector } from "react-redux";

ReadStatefromStoreViaHook

let data = useSelector(state => state);

UseStateInComponent

<h3>Count : {data.count}</h3>

NoMapsStateToProps

export default connect()(Counter);

3) Till now we successfully read state via useSelector from our store & update our component, now we will look into 'useDispatch' hook to dispatch actions to our store.

useDispatch :

useDispatch help us to dispatch action from component to store.

Import

import { useSelector, useDispatch } from "react-redux";

MakeObject

 const dispatch = useDispatch();

UpdateButtonOnClickEvent

<p>
        <button onClick={() => dispatch({ type: "INC", value: 1 })}>
          INCREMENT
        </button>

        <br />
        <br />

        <button onClick={() => dispatch({ type: "DEC", value: 1 })}>
          DECREMENT
        </button>
      </p>

NoHOC_Connect

export default Counter;

Congratulation

You have successfully converted to functional component using react-redux hooks.

Reducer

const initialState = {
  count: 0
};

const reducer = (state = initialState, action) => {
  let newState = { ...state };
  switch (action.type) {
    case "INC":
      newState.count = newState.count + action.value;
      state = { ...newState };
      return newState;
    case "DEC":
      newState.count = newState.count - action.value;
      state = { ...newState };
      return newState;
    default:
      return newState;
  }
};

export default reducer;

Index.js

import React from "react";
import ReactDOM from "react-dom";
import reducer from "./store/reducer";
import { Provider } from "react-redux";
import { createStore } from "redux";
import Counter from "./counter";

import "./styles.css";

const store = createStore(reducer);

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

If anyone having issue in conversion, please let me know. I will be happy to help you guys.

Billboard image

Monitor more than uptime.

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay