مدیریت وضعیت در React؛ مقایسه Redux و Context API

پرسشی که همه مطرح می‌کنند

تقریباً هر پروژه React در نهایت به جایی می‌رسد که propها از سه یا چهار لایه عبور می‌کنند و کسی می‌پرسد: «آیا باید از Redux استفاده کنیم؟»

پاسخ من از «Redux برای همه‌چیز» به دیدگاهی دقیق‌تر تغییر کرده است.

چه زمانی Context API کافی است

Context API برای این موارد بسیار مناسب است:

• تغییر پوسته — ترجیحاتی که به‌ندرت تغییر می‌کنند
• وضعیت احراز هویت — کاربر فعلی و وضعیت ورود
• زبان و بومی‌سازی — ترجیحات زبان و قالب‌بندی
• پرچم قابلیت‌ها — کلیدهای بولی ساده

const ThemeContext = createContext<Theme>('dark');

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<Theme>('dark');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

Context با تغییر مقدار، همه مصرف‌کنندگان را دوباره رندر می‌کند. برای تغییرات کم‌تعداد مناسب است، اما در به‌روزرسانی‌های مکرر می‌تواند به مشکل عملکردی تبدیل شود.

چه زمانی سراغ Redux برویم

پیچیدگی Redux (یا Zustand و Jotai) زمانی ارزشمند می‌شود که موارد زیر را دارید:

1. گذارهای پیچیده وضعیت — وضعیتی که به‌شکل قابل پیش‌بینی و مستند تغییر می‌کند
2. وضعیت مشتق‌شده میان اجزای متعدد — selectorهایی که از داده خام نتیجه می‌سازند
3. کش وضعیت سرور — هرچند React Query این کار را بهتر انجام می‌دهد
4. نیاز به ابزار توسعه — Redux DevTools واقعاً برای اشکال‌زدایی عالی است

// Redux slice for a shopping cart
const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [], total: 0 },
  reducers: {
    addItem: (state, action) => {
      state.items.push(action.payload);
      state.total += action.payload.price;
    },
    removeItem: (state, action) => {
      state.items = state.items.filter(i => i.id !== action.payload);
      state.total = state.items.reduce((sum, i) => sum + i.price, 0);
    },
  },
});

چارچوب تصمیم‌گیری من

آیا وضعیت باید میان اجزای زیادی به اشتراک گذاشته شود؟
  └─ خیر ← useState / useReducer کافی است
  └─ بله ← آیا مرتب تغییر می‌کند؟
            └─ خیر ← Context API مناسب است
            └─ بله ← آیا گذارهای پیچیده دارد؟
                      └─ خیر ← Zustand سبک است
                      └─ بله ← Redux Toolkit

پاسخ صادقانه

در سال ۲۰۲۵ برای بیشتر پروژه‌ها پیش از Redux سراغ Zustand می‌روم. این ابزار با حدود ۲۰ درصد کد اضافی، نزدیک به ۸۰ درصد توان Redux را می‌دهد. Redux را برای پروژه‌های بزرگ تیمی نگه دارید که الگوهای سخت‌گیرانه آن به نگه‌داری کمک می‌کنند.

برای وضعیت سرور، TanStack Query یا React Query در بسیاری از مواقع نیاز به هر دو گزینه را از بین می‌برد.