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

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

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

Difference Between Three.js and Babylon.js: What Actually Should You Choose?

You don’t have to be just a graphic designer to create interactive designs. You can be a coder and still create visually appealing and eye-catching games. All thanks to JavaScript. The first cross-browser JavaScript library–three.js–that can create 3D computer graphics was first released on 24 April 2010 by Ricardo Cabello. He first wrote the code in ActionScript language, which was then used by Adobe Flash. But then in 2009, he ported the code to JavaScript. Previously, people used WebGL. But the problem was its limitation: it can create only simple pointers and lines. Ricardo, instead of abandoning WebGL as something that is futile, used it to his own advantage. He built three.js on top of WebGL. This renders three.js to create 3D graphics in the browser. Even a 3D scene can be created easily using Canvas and WebGL now. But then in 2013, Babylon.js was created. But why? Why did its creators, Microsoft and David Catuhe, make something that another JavaScript library–three.js –was alre...
Post a Comment
Read more