إدارة الحالة في React: مقارنة Redux مقابل Zustand مقابل Context API

مقدمة

تطورت إدارة الحالة في React بشكل كبير. أيام وضع كل شيء في Redux انتهت. التطبيقات الحديثة تستفيد من فهم الأنواع المختلفة للحالة واستخدام الأداة المناسبة لكل نوع.

مربع الحالة

ليست كل الحالات متساوية. فهم هذه الفئات يساعد في اختيار النهج الصحيح:

                    قصيرة العمر            طويلة العمر
              ┌─────────────────────┬─────────────────────┐
              │                     │                     │
    محلية     │   حالة إدخال النموذج │   تفضيلات المكون    │
              │   تبديلات UI        │   محتوى المسودة     │
              │   (useState)        │  (useState+storage) │
              │                     │                     │
              ├─────────────────────┼─────────────────────┤
              │                     │                     │
    عامة      │   الإشعارات         │   جلسة المستخدم     │
              │   النوافذ المنبثقة   │   إعدادات التطبيق   │
              │   (Context/Zustand) │   (Zustand/Redux)   │
              │                     │                     │
              └─────────────────────┴─────────────────────┘

                    حالة الخادم (React Query / SWR)
              ┌─────────────────────────────────────────────┐
              │   استجابات API المخزنة مؤقتاً               │
              │   إعادة الجلب في الخلفية                    │
              │   التحديثات المتفائلة                        │
              └─────────────────────────────────────────────┘

النمط 1: حالة الخادم مع React Query

معظم "الحالة العامة" هي في الواقع حالة خادم متنكرة:

// ❌ النمط القديم: الجلب في useEffect، التخزين في Redux
useEffect(() => {
  dispatch(fetchUsers());
}, []);

// ✅ النمط الحديث: React Query يتعامل مع التخزين المؤقت والتحميل والأخطاء
const { data: users, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  staleTime: 5 * 60 * 1000, // اعتبر البيانات طازجة لمدة 5 دقائق
});

النمط 2: حالة العميل مع Zustand

للحالة العامة من جانب العميل حقاً، Zustand يقدم البساطة:

import { create } from 'zustand';
import { persist, devtools } from 'zustand/middleware';

interface UIState {
  sidebarCollapsed: boolean;
  theme: 'light' | 'dark';
  toggleSidebar: () => void;
  setTheme: (theme: 'light' | 'dark') => void;
}

const useUIStore = create<UIState>()(
  devtools(
    persist(
      (set) => ({
        sidebarCollapsed: false,
        theme: 'light',
        toggleSidebar: () => set((state) => ({ 
          sidebarCollapsed: !state.sidebarCollapsed 
        })),
        setTheme: (theme) => set({ theme }),
      }),
      { name: 'ui-store' }
    )
  )
);

النمط 3: حالة النموذج

النماذج تستحق إدارة حالة مخصصة:

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

const userSchema = z.object({
  name: z.string().min(2, 'الاسم يجب أن يكون حرفين على الأقل'),
  email: z.string().email('عنوان بريد إلكتروني غير صالح'),
});

function UserForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: zodResolver(userSchema),
  });

  return (
    <form onSubmit={handleSubmit((data) => mutation.mutate(data))}>
      <input {...register('name')} />
      {errors.name && <span>{errors.name.message}</span>}
    </form>
  );
}

النمط 4: حالة URL

بعض الحالات تنتمي إلى URL للمشاركة ودعم زر الرجوع.

اختيار الأداة المناسبة

function chooseStateManagement(stateType: string) {
  if (stateType === 'server-data') return 'React Query أو SWR';
  if (stateType === 'form') return 'React Hook Form أو Formik';
  if (stateType === 'url-parameters') return 'useSearchParams';
  if (stateType === 'component-local') return 'useState أو useReducer';
  if (stateType === 'global-client-state') return 'Zustand (بسيط) أو Redux Toolkit (معقد)';
}

الخلاصة

إدارة الحالة الحديثة تتعلق باستخدام الأداة المناسبة لكل نوع من الحالة:

1. حالة الخادم: React Query يتعامل مع التخزين المؤقت وإعادة الجلب والمزامنة
2. حالة النموذج: React Hook Form مع مكتبات التحقق
3. حالة URL: useSearchParams من React Router
4. حالة العميل العامة: Zustand للبساطة، Redux Toolkit للتعقيد
5. حالة المكون: useState و useReducer

لا تلجأ للحالة العامة افتراضياً. معظم الحالة إما حالة خادم (استخدم React Query) أو حالة محلية (استخدم useState).