Connecting Redux to Your React App: A Quick Guide to React-Redux and useSelector

Introduction

React is a fantastic library for building reusable and scalable user interfaces. However, managing the state in large-scale applications can become complicated. That’s where Redux comes in. Redux is a predictable state container that makes managing your application’s state easier and more maintainable.

In this article, we will discuss how to connect Redux to your React application using React-Redux and the useSelector hook. We will walk through the steps of setting up Redux, creating a store, and connecting it to your React components using the useSelector hook.

Prerequisites

Before proceeding, make sure you have the following installed on your machine:

1. Node.js and npm
2. React App using Vite
3. A basic understanding of React and Redux

Let’s get started!

Step 1: Set up a new React project

Create a new React project using Create React App by running the following command in your terminal:

npm create vite@latest react-redux-demo

Step 2: Install Redux and React-Redux

Navigate to your project directory and install Redux and React-Redux using the following command:

cd react-redux-demo
npm install redux react-redux

Step 3: Create your Redux store

First, let’s create a Redux store. In your src folder, create a new folder called store. Inside the store folder, create a file named index.jsx. Add the following code to the index.jsx File:

import { createStore } from "redux";
import rootReducer from "../reducers";
const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
export default store;

Step 4: Create a simple reducer

Now, let’s create a simple reducer. In your src folder, create a new folder called reducers. Inside the reducers folder, create a file named index.jsx. Add the following code to the index.jsx File:

const initialState = {
  count: 0,
};
const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};
export default rootReducer;

Step 5: Connect the Redux store to your React application

In your src folder, open the index.jsx file and import the Provider component from react-redux. Wrap your App component with the Provider component and pass the Redux store as a prop. Your The index.jsx file should look like this:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import "./index.css";
import App from "./App";
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Step 6: Use the useSelector hook to connect your React components to the Redux store

Now that your Redux store is connected to your React application, you can use the useSelector hook to access the state in your components. Open the src/App.jsx file and replace its content with the following code:

import React from "react";
import { useSelector, useDispatch } from "react-redux";
function App() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1>React-Redux and useSelector Demo</h1>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
    </div>
  );
}
export default App;

In this example, we use the useSelector hook to access the count value from our Redux store. We also use the useDispatch hook to dispatch actions to modify the state. When the user clicks the "Increment" or "Decrement" buttons, the INCREMENT DECREMENT Actions are dispatched, respectively, updating the state in the Redux store.

Conclusion

We have successfully connected a Redux store to a React application using React-Redux and the useSelector hook. We have also demonstrated how to access the state in a React component and dispatch actions to update the state.

React-Redux and the useSelector hook make it easier to manage your application’s state, ensuring a more predictable and maintainable codebase. By using these tools, you can build scalable and efficient applications that are easier to understand and maintain.

1. React (Official Documentation)
2. Redux (Official Documentation)
3. React-Redux (Official Documentation)