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

Exploring Google’s New Gemini CLI: The Ultimate Open-Source Dev Tool

  Google quietly released a local AI agent that builds apps, debugs code, parses your repo, and fetches real-time data, right inside your terminal. And it’s completely free. This year, the most revolutionary developer tools I’ve used didn’t come with a splashy launch or billion-dollar hype. It came as a simple CLI: Gemini CLI, a terminal-based AI agent built on top of Google’s Gemini 2.5 Pro model . At first glance, it looks like a lightweight alternative to Claude Code. But after just 10 minutes of use, it became clear: this isn’t just a convenient utility. It’s a powerful local AI development assistant that can analyze, automate, and accelerate almost every part of your software workflow. And best of all? It’s fully open-source under the Apache 2.0 license It gives you up to 1,000 free requests per day It integrates with your local filesystem, IDE, and the web And it runs entirely in your terminal , no browser needed In this guide, I’ll show you what Gemini CLI is, how it works...
Post a Comment
Read more

React Native vs React JS — Key Difference, Advantages-Disadvantages, Limitations

  React Native vs React JS — Key Difference, Advantages-Disadvantages, Limitations React JS It is a JavaScript library that supports each face and server-side. It’s a popularly used library that focuses on developing user interfaces for mobile and internet-primarily based applications. React Native It is a cross-platform mobile framework that uses the ReactJS framework. It’s primarily used for developing native mobile applications like Windows, iOS and mechanical man. The major advantage provided by React Native is that it permits the developers to form mobile applications on varied platforms while not compromising the tip user’s expertise. Components of React JS Components of React Native Basic parts View — it is the essential building block of internet applications. Text — It helps to point out the text. The text element contains nesting, styling, and bit handling. Image — this is often a React element for showing multiple footages like network pictures and static resources. Text...
Post a Comment
Read more

Top 25 JavaScript Array Methods Every Developer Should Learn

  You wrote some code. You ran it. And then your array went from a list of users to an angry collection of undefined , NaN And more bugs than a summer camping trip. Staring at map , filter , and reduce like they were ancient scrolls written in Elvish. Copy-pasting from Stack Overflow like a caffeinated zombie. Wondering why the heck splice just murdered half my data. But here’s the truth: mastering arrays is non-negotiable. If you’re fumbling with arrays, you’re fumbling with everything . Web apps, APIs, UIs — they all depend on your ability to tame this glorious beast. So buckle up. I’m about to drop 25 methods that will make you look at arrays like a surgeon looks at a scalpel. Edited by me 1. map() - Because Loops Are for Cavemen You want to transform every item in an array? Don’t go forEach your way to hell. map It is concise, expressive, and doesn’t mutate your data. It’s like therapy for arrays. const names = [ 'alice' , 'bob' , 'charlie' ]; const u...
Post a Comment
Read more