Udemezue John

Posted on Mar 11

How To Use Redux In React JS

#webdev #programming #javascript #beginners

Introduction.

React is great for building dynamic user interfaces, but as your app grows, managing state can become messy.

That’s where Redux comes in. It helps keep everything organized by providing a centralized state management system.

If you've ever found yourself passing props down multiple levels (a.k.a. "prop drilling") or struggling to keep track of changes across different components, Redux can save you a lot of headaches. But at first, it might seem complicated.

Don't worry—I’ll break it down step by step.

By the end of this guide, you’ll understand what Redux is, why it's useful, and how to set it up in a React app.

What Is Redux and Why Use It?

Redux is a state management library that helps you store and manage global state in your application.

Instead of passing state manually between components, Redux keeps all your data in one place, making updates predictable and easier to debug.

When Do You Need Redux?

Not every React app requires Redux. Here are some signs that it might be helpful:

Your app has complex state logic (e.g., data fetching, authentication, UI themes).
You find yourself passing props through multiple components just to share data.
You need a single source of truth for data that multiple parts of your app rely on.

How Redux Works (The Basics)

Redux has three key parts:

Store – The central place where all your app’s state lives.
Actions – Events that describe changes to the state (e.g., a user logs in).
Reducers – Functions that update the state based on actions.

Think of it like a to-do list:

The store holds the list of tasks.
When you add a task, you dispatch an action.
The reducer updates the list with the new task.

Setting Up Redux in a React App

Now, let's go step by step to add Redux to a React app.

Step 1: Install Redux and React-Redux

Run this in your terminal:

npm install redux react-redux @reduxjs/toolkit

We're using @reduxjs/toolkit because it simplifies Redux setup.

Step 2: Create a Redux Store

Inside your src folder, create a new folder called redux. Inside it, create a file named store.js:

import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({
  reducer: {}, // We'll add reducers here later
});

This sets up a Redux store using configureStore from Redux Toolkit.

Step 3: Create a Slice (Reducer + Actions in One Place)

Inside the redux folder, create another file, counterSlice.js:

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Here’s what this does:

Defines an initial state ({ value: 0 }).
Creates reducers for updating the state (increment and decrement).
Exports the actions (increment, decrement) so components can use them.

Step 4: Add the Reducer to the Store

Open store.js and update it like this:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Now, Redux knows about our counterstate!

Step 5: Provide the Store to the App

Open index.js and wrap the app with Provider:

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./redux/store";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

This makes Redux available in all components.

Step 6: Use Redux State in Components

Now, let's use Redux in a React component. Open App.js:

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./redux/counterSlice";

function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default App;

How This Works:

useSelector gets the current counter value from the Redux store.
useDispatch lets you send actions (increment and decrement).
Clicking a button updates the state without prop drilling!

FAQs

1. Is Redux still relevant in 2025?

Yes! While React has introduced hooks like useContext and useReducer, Redux is still useful for large apps with complex state management.

2. Can I use Redux with Next.js?

Yes, you can! The setup is similar, but you might need next-redux-wrapper to handle server-side rendering.

3. Do I always need Redux Toolkit?

No, but it’s recommended because it simplifies Redux setup and reduces boilerplate code.

Further Resources

Conclusion

Redux might seem complicated at first, but once you break it down, it’s just a structured way to manage state. With Redux Toolkit, setup is much easier than before.

Now that you’ve learned the basics, what kind of app would you like to build with Redux? 🚀

DEV Community