React Redux hooks tutorial with examples

In this tutorial, we are going to learn about how to use react hooks with a redux store and perform actions.

React hooks API allows us to use state and lifecycle functionalities in functional components.

This tutorial assumes that you already have some basic knowledge about redux, if don’t know about it you can check out my redux tutorial.

Getting started

First, we are creating a new react project by using the create-react-app cli.

Open your terminal and run the below command.

npx create-react-app redux-hooks

This above command will download the react app-related files in the “redux-hooks” folder.

Now, we need to change our working directory to “redux-hooks” folder.

cd redux-hooks

Installing redux and react-redux libraries

Run the below commands in your terminal to install both libraries.

npm i redux react-redux

Setting up redux store

Now open your redux-hooks folder in your favorite code editor.

create a new file called store.js in your src folder and add the below code.

function reducer(state = { num: 0 }, action) {
  switch (action.type) {
    case "INCREMENT":      return {
        ...state,
        num: state.num + action.step
      };
    case "DECREMENT":      return {
        ...state,
        num: state.num - action.step
      };
    default:
      return state;
  }
}

export default reducer;

In the above code, we have created a reducer() function with two action types INCREMENT and DECREMENT.

Now open your index.js and add the below code.

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";import { createStore } from "redux";import "./styles.css";
import reducer from "./store.js";import App from "./app";

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

With this our redux setup is complete, we can now access the redux store from the functional components using react hooks.

useSelector hook (accessing state)

The useSelector hook is similar to mapStatetoprops by using this hook we can access the entire redux store state.

The useSelector hook will also subscribe to the redux store.

import React from "react";
import { useSelector } from "react-redux";
function App() {
  const counter = useSelector(state => state);
  return (
    <div className="App">
      <h1>{counter.num}</h1>    </div>
  );
}

export default App;

In the above code, we first imported useSelector hook from the react-redux library.

The useSelector() will take the function as an argument and the returns the redux store state.

useDispatch hook (Dispatching actions)

The useDispatch() hook is used to dispatch the actions.

import React from "react";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
function App() {
  const counter = useSelector(state => state);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1>{counter.num}</h1>
      <button
        onClick={() =>          dispatch({            type: "INCREMENT",            step: 1          })        }
      >
        Increment
      </button>
    </div>
  );
}

export default App;

Here we are dispatching the action type INCREMENT whenever we click on a Increment button.