We can connect Redux with React using React Redux package that is the official React binding for Redux. It allows React components to read data from a Redux Store, and dispatch Actions to the Store to update data. in this blog, I will explain to you how to connect Redux with React by building a react counter app that needs just to connect with redux.

Building the Counter app

I did create the counter component, counter slice (I will use react-redux), and store, so all what we need is to jump to React Redux

1. Install react-redux package

Let's install the react-redux packege with npm

npm i react-redux

2. Connect React with the store

To connect React with the store we should use a component called Provider from react-redux and put it in the top of our application, the Provider takes a store attribute, and its value should be our redux store.
So let's do that in the main.js file:

import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

3. Get the count value from the store and display it

To get the count value from the store and display it in the counter component, we should use the useSelector hook from react-redux.
useSelector takes a function and run it with the state store as an argument and returns whatever that function returned.
So let's take the count value from useSelector and display it in the counter component.

import { useSelector } from "react-redux";

function Counter() {
  const count = useSelector((state) => state.counter.count);

  return (
    <div id="counter-app">
      <div className="container">
        <p id="display">{count}</p>
      </div>
      <div className="container">
        <button id="increment-button">
          +
        </button>
        <button id="decrement-button">
          -
        </button>
      </div>
    </div>
  );
}

export default Counter;

4. Increase and decrease the counter

react-redux provide a hook called useDispatch, the hook returns a dispatch function that we can use to dispatch any action.
So let's take the dispatch function form useDispatch and call it with the increase action when the user clicks on the plus button or decrease action when he clicks on the minus button.

import { useSelector, useDispatch } from "react-redux";
import { increace, decrease } from "./counterSlice";

function Counter() {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();
  return (
    <div id="counter-app">
      <div className="container">
        <p id="display">{count}</p>
      </div>
      <div className="container">
        <button id="increment-button" onClick={() => dispatch(increace())}>
          +
        </button>
        <button id="decrement-button" onClick={() => dispatch(decrease())}>
          -
        </button>
      </div>
    </div>
  );
}

export default Counter;

5. Counter app preview and when to put a state on the store

The use case of redux is to provide a state to all the components, so if you have a state that a single component consumes it, it's better to put in that component rather than the store.

I hope this article was a good read for you. Thank you so much! ❤️

👉 Follow Me: Github LinkedIn Twitter