Skip to main content

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)

Comments

Post a Comment

Popular posts from this blog

CSS only Click-handlers You Might not be using, but you should

  You’re building a simple website, a good-looking landing page with a “See More” button. Instinctively, you reach for JavaScript to handle the button click event. But wait — what if I told you that CSS alone could do the job? Yes. CSS is often underestimated, but it can handle click interactions without JavaScript. In this guide, you’ll learn how to create CSS-only click handlers using the :target pseudo-class, and explore scenarios where this approach makes perfect sense. The :target Pseudo-Class CSS offers several pseudo-classes that let you style elements based on different states ( :hover , :focus , :checked ). But there’s one you might not have used before —  :target . The :target pseudo-class applies styles to an element when its ID matches the fragment identifier in the URL (the part after # ). This behavior is commonly seen when clicking an anchor link that jumps to a section on the same page. Here’s a simple example : <a href="#contact">Go to Contact</...
Post a Comment
Read more

The 10 Best New CSS Features in 2025 Already Supported in All Major Browsers

  CSS keeps evolving with new capabilities that make our work faster, cleaner, and more powerful. Thanks to the latest browser advances (Baseline 2024), many fresh features now work across all major engines. Below are ten highlights you can start using right away. Do you want more? Let’s check out my project, CSSToday: csstoday.dev/ 1. Scrollbar-Gutter & Scrollbar-Color When a browser displays a scrollbar, the layout can shift as space is taken up. With scrollbar-gutter , you can preserve scrollbar space even before scrolling begins: .scrollable {   scrollbar-gutter : stable both-edges; } You can also style your scrollbars with scrollbar-color : .scrollable {   scrollbar-color : #444 #ccc ; } This ensures a consistent look and prevents layout jumps. What it’s good for ✅ scrollbar-gutter keeps layouts stable by reserving space for a scrollbar, preventing annoying shifts when the scrollbar appears. scrollbar-color lets you style the scrollbar’s track and thumb, en...
Post a Comment
Read more

Sharpen Your Front-End Skills: Quick HTML, CSS & React Interview Challenges

  The source of this image is Chat GPT based on writing! Are you preparing for front-end developer interviews and looking for practical, hands-on ways to improve your HTML, CSS, and React skills? Whether you’re a beginner aiming to build confidence or an experienced developer brushing up on UI skills, small, targeted challenges can make a huge difference. In this article, I’ll walk you through some of the best free and low-cost resources that offer real-world front-end tasks — perfect for interview prep, portfolio building, and daily practice. 1. Frontend Mentor frontendmentor.io Frontend Mentor is one of the most popular platforms for hands-on HTML, CSS, and JavaScript challenges. You get beautifully designed templates (in Figma or image formats) and are asked to bring them to life using clean code. The platform offers difficulty levels ranging from newbie to expert, and it’s perfect for practicing responsiveness and semantic HTML. Bonus : You can even filter for React-based ...
Post a Comment
Read more