🧐 Do You Really Need Redux?

#redux #webdev #javascript #programming

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>
  );
}

✅ 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;

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>
  );
}

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.

DEV Community