DEV Community

Mourya Vamsi Modugula
Mourya Vamsi Modugula

Posted on

🧐 Do You Really Need Redux?

When people start learning React, they often hear: “You need Redux!”
But here’s the truth: not every app needs Redux.

Redux is great, but it’s also extra code, setup, and concepts to maintain. Let’s break it down.


❌ When NOT to Use Redux

If your app is small, you probably don’t need it.

Examples:

  • A to-do app where only one component manages state.
  • A theme toggle (dark/light mode).
  • A form where values don’t need to be shared globally.

👉 In these cases, just use React’s built-in hooks:

// No Redux needed
import { useState } from "react";

export default function ThemeToggle() {
  const [dark, setDark] = useState(false);

  return (
    <button onClick={() => setDark(!dark)}>
      {dark ? "🌙 Dark Mode" : "☀️ Light Mode"}
    </button>
  );
}
Enter fullscreen mode Exit fullscreen mode

✅ When Redux is a Good Choice

Redux shines in large apps with shared state across many components.

Examples:

  • An e-commerce app: cart items, user info, product filters.
  • A chat app: messages, notifications, online users.
  • A dashboard: global filters, real-time data, API caching.

Here, having one predictable place for state makes life much easier.


🚀 Modern Redux = Redux Toolkit

If you do need Redux, don’t write boilerplate reducers/actions manually.
Use Redux Toolkit (RTK) — the official way to write Redux today.

Example: a simple counter:

// store/counterSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface CounterState {
  value: number;
}

const initialState: CounterState = { value: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
    addBy: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, addBy } = counterSlice.actions;
export default counterSlice.reducer;
Enter fullscreen mode Exit fullscreen mode

Hooking it up in a component:

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

export default function Counter() {
  const count = useSelector((state: any) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => dispatch(increment())}></button>
      <button onClick={() => dispatch(decrement())}></button>
      <button onClick={() => dispatch(addBy(5))}>+5</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Much cleaner than old Redux boilerplate 🎉


💡 Best Practices

  • Store only shared/global state in Redux.
  • Keep UI state (like modals, dropdowns) in local useState.
  • Use RTK Query for API data fetching & caching (built into Redux Toolkit).
  • Don’t overcomplicate — sometimes Context API is enough.

🔑 Takeaway

Redux is not a must for every project.

  • Small apps → useState / useContext.
  • Medium apps → Context + hooks.
  • Large apps → Redux Toolkit for predictable state management.

👉 Remember: The right use of Redux is knowing when not to use it.


Top comments (0)