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

تقع إدارة الحالة في قلب كل تطبيق React غير التافه. قم بتنفيذ الأمر بشكل صحيح وسيتم تعديل قاعدة التعليمات البرمجية الخاصة بك بأمان؛ إذا أخطأت في الأمر، فسينتهي بك الأمر بكوابيس الحفر، وواجهة المستخدم التي لا معنى لها، والمكونات التي تعيد تقديم نفسها إلى غياهب النسيان. والخبر السار هو أن نظام React البيئي قد نضج بشكل كبير. لديك الآن قائمة غنية من الأدوات المصممة خصيصًا لهذا الغرض - Redux Toolkit، وZustand، وJotai، وTanStack Query، والسياق API المدمج - تم تحسين كل منها لفئة معينة من المشكلات.

تتناول هذه المقالة كل حل بعمق، وتشرح المفاضلات بأمثلة ملموسة، وتمنحك إطارًا لاتخاذ القرار يمكنك تطبيقه على الفور على مشاريعك الخاصة.

فهم الأنواع المختلفة للدولة

قبل الوصول إلى أي مكتبة، من المفيد أن تكون دقيقًا بشأن نوع الحالة التي تديرها فعليًا. إن الخلط بين فئات الحالات المختلفة هو السبب الجذري لمعظم تطبيقات React ذات الهندسة المفرطة.

• حالة واجهة المستخدم المحلية — ما إذا كانت القائمة المنسدلة مفتوحة، وعلامة التبويب النشطة، والقيمة الحالية للمدخل المتحكم فيه. هذه الحالة مملوكة لمكون واحد أو شجرة فرعية صغيرة.
• حالة العميل المشتركة - البيانات التي تحتاج المكونات المتعددة، التي قد تكون بعيدة، إلى قراءتها أو كتابتها: المستخدم المعتمد حاليًا، وتفضيلات السمات، وعربة التسوق.
• حالة الخادم - البيانات التي تنشأ على الخادم، وهي غير متزامنة بطبيعتها، وتحتاج إلى إبطال ذاكرة التخزين المؤقت، وإعادة جلب الخلفية، وإدارة دورة حياة التحميل/الخطأ.
• حالة عنوان URL — عوامل التصفية، وترقيم الصفحات، ومصطلحات البحث التي يجب أن تستمر بعد تحديث الصفحة وتكون قابلة للمشاركة عبر رابط.
• حالة النموذج - المدخلات التي يتم التحكم فيها، وأخطاء التحقق من الصحة، وحالة الإرسال، والتي غالبًا ما يتم التعامل معها بشكل أفضل من خلال مكتبة مخصصة مثل React Hook Form.

الشيء الوحيد الأكثر تأثيرًا الذي يمكنك القيام به هو مقاومة الرغبة في دمج كل فئة من فئات الدولة في متجر عالمي واحد. تحتوي كل فئة على متطلبات تناسق مختلفة، وأعمار مختلفة، وتكرارات تحديث مختلفة.

سياق التفاعل: الخيار المدمج

يأتي سياق API مع React ولا يتطلب أي تبعيات إضافية. إنه يعمل بشكل جيد مع الحالة التي تتغير بشكل غير متكرر وتستهلكها العديد من المكونات - الأمثلة الكلاسيكية هي السمة والإعدادات المحلية وكائن المستخدم الذي تمت مصادقته.

// AuthContext.tsx
import { createContext, useContext, useState, ReactNode } from 'react';

interface AuthState {
  user: User | null;
  login: (credentials: Credentials) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthState | null>(null);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const login = async (credentials: Credentials) => {
    const user = await authService.login(credentials);
    setUser(user);
  };

  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used inside AuthProvider');
  return ctx;
}

فخ أداء السياق

يتمتع السياق بخاصية أداء معروفة تزعج العديد من المطورين: يقوم كل مستهلك بإعادة العرض كلما تغير مرجع قيمة السياق. إذا قمت بتخزين كائن كبير يتم تحوره بشكل متكرر في سياق واحد، فسوف تؤدي إلى عمليات إعادة عرض غير ضرورية عبر الشجرة بأكملها.

استراتيجيات التخفيف هي:

• تقسيم السياقات حسب تكرار التحديث. احتفظ بكائن المستخدم في سياق واحد وتفضيلات واجهة المستخدم في سياق آخر.
• حفظ كائن القيمة مع useMemo لذلك يتغير المرجع فقط عندما تتغير البيانات بالفعل.
• يستخدم React.memo على مكونات المستهلك لتخطي عمليات إعادة العرض عندما لا تتغير الدعائم التي يهتمون بها.

الاستنتاج الصادق هو أن السياق ممتاز للحالة العالمية ذات التردد المنخفض، ولكنه ليس حلاً لإدارة الحالة للأغراض العامة. بمجرد أن تجد نفسك تكتب مذكرة تفصيلية للتغلب على سلوك إعادة عرض السياق، فقد حان الوقت للوصول إلى مكتبة مخصصة.

مجموعة أدوات الإعادة: اختيار المؤسسة الناضجة

تتمتع Redux بسمعة طيبة في مجال النموذج النموذجي - وهي السمعة التي اكتسبتها في عصر ما قبل مجموعة الأدوات. تعمل مجموعة أدوات Redux (RTK) على إلغاء الحفل مع الحفاظ على ما يجعل Redux قويًا: شجرة حالة واحدة يمكن التنبؤ بها وقابلة للفحص مع تدفق بيانات صارم أحادي الاتجاه.

سفن آر تي كيه createSlice، الذي يولد منشئي الإجراء ومخفضاته من تعريف واحد، ويستخدم Immer تحت الغطاء حتى تتمكن من كتابة الطفرات التي تبدو ضرورية ولكنها في الواقع يتم تطبيقها بشكل ثابت.

// features/cart/cartSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CartItem {
  id: string;
  name: string;
  quantity: number;
  price: number;
}

interface CartState {
  items: CartItem[];
  coupon: string | null;
}

const initialState: CartState = { items: [], coupon: null };

export const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addItem(state, action: PayloadAction<CartItem>) {
      const existing = state.items.find(i => i.id === action.payload.id);
      if (existing) {
        existing.quantity += action.payload.quantity;
      } else {
        state.items.push(action.payload);
      }
    },
    removeItem(state, action: PayloadAction<string>) {
      state.items = state.items.filter(i => i.id !== action.payload);
    },
    applyCoupon(state, action: PayloadAction<string>) {
      state.coupon = action.payload;
    },
  },
});

export const { addItem, removeItem, applyCoupon } = cartSlice.actions;
export default cartSlice.reducer;

استعلام RTK: حالة الخادم داخل Redux

يقوم RTK بشحن مرافق يسمى RTK Query الذي يتعامل مع حالة الخادم مباشرة داخل متجر Redux. يقوم بإنشاء خطافات React تلقائيًا من تعريفات نقطة النهاية ويدير التخزين المؤقت والإبطال والتحديثات الإيجابية.

// services/productsApi.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const productsApi = createApi({
  reducerPath: 'productsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Product'],
  endpoints: (builder) => ({
    getProducts: builder.query<Product[], void>({
      query: () => '/products',
      providesTags: ['Product'],
    }),
    updateProduct: builder.mutation<Product, Partial<Product>>({
      query: ({ id, ...patch }) => ({
        url: `/products/${id}`,
        method: 'PATCH',
        body: patch,
      }),
      invalidatesTags: ['Product'],
    }),
  }),
});

export const { useGetProductsQuery, useUpdateProductMutation } = productsApi;

تُعد Redux Toolkit الخيار الصحيح عندما تحتاج إلى تصحيح أخطاء السفر عبر الزمن عبر Redux DevTools، أو عندما تحتاج فرق متعددة إلى المساهمة في نموذج حالة مشترك باستخدام اتفاقيات مفروضة، أو عندما يكون لديك منطق أعمال معقد عبر الشرائح يستفيد من البرامج الوسيطة مثل redux-saga أو redux-observable.

Zustand: دولة عالمية خفيفة الوزن بدون الحفل

Zustand يأخذ نهجا مختلفا جذريا. لا يوجد مزود ولا مخفض ولا نوع إجراء. يمكنك تعريف المتجر ككائن جافا سكريبت عادي له الحالة والأساليب، ثم تستهلكه بخطاف واحد. يناسب API بالكامل شاشة واحدة.

// stores/useCartStore.ts
import { create } from 'zustand';
import { persist, devtools } from 'zustand/middleware';

interface CartStore {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (id: string) => void;
  totalPrice: () => number;
  clear: () => void;
}

export const useCartStore = create<CartStore>()(
  devtools(
    persist(
      (set, get) => ({
        items: [],

        addItem: (item) =>
          set((state) => {
            const existing = state.items.find((i) => i.id === item.id);
            if (existing) {
              return {
                items: state.items.map((i) =>
                  i.id === item.id
                    ? { ...i, quantity: i.quantity + item.quantity }
                    : i
                ),
              };
            }
            return { items: [...state.items, item] };
          }),

        removeItem: (id) =>
          set((state) => ({ items: state.items.filter((i) => i.id !== id) })),

        totalPrice: () =>
          get().items.reduce((sum, i) => sum + i.price * i.quantity, 0),

        clear: () => set({ items: [] }),
      }),
      { name: 'cart-storage' }
    )
  )
);

الاشتراكات الحبيبية والأداء

تعمل Zustand على حل مشكلة إعادة عرض السياق من خلال الاشتراكات القائمة على المحدد. يُعاد عرض المكون فقط عندما تتغير شريحة الحالة التي حددها.

// Only re-renders when items.length changes, not on price changes
const itemCount = useCartStore((state) => state.items.length);

// Only re-renders when the total changes
const total = useCartStore((state) => state.totalPrice());

يغطي النظام البيئي للبرمجيات الوسيطة لـ Zustand الثبات localStorageوتكامل DevTools، وتحولات نمط Immer، ومزامنة URL. إنه الخيار المفضل للفرق التي تريد إمكانية مستوى Redux دون تكلفة إعداد مستوى Redux.

جوتاي: الدولة الذرية مستوحاة من الارتداد

توضح نماذج جوتاي رسمًا بيانيًا للذرات، وهي وحدات حالة صغيرة وقابلة للتركيب ويمكن استخلاصها من بعضها البعض. يعتبر هذا النموذج قويًا بشكل خاص بالنسبة للحالة الديناميكية: فكر في قائمة عقد المحرر حيث يكون لكل عقدة حالة تحديد/تركيز مستقلة خاصة بها، أو نموذج معقد حيث تعتمد رؤية الحقل على قيم الحقول الأخرى.

// atoms/filterAtoms.ts
import { atom, selector } from 'jotai';

export const searchTermAtom = atom('');
export const categoryAtom = atom<string | null>(null);
export const productsAtom = atom<Product[]>([]);

// Derived atom — recomputes only when its dependencies change
export const filteredProductsAtom = atom((get) => {
  const products = get(productsAtom);
  const term = get(searchTermAtom).toLowerCase();
  const category = get(categoryAtom);

  return products.filter((p) => {
    const matchesTerm = p.name.toLowerCase().includes(term);
    const matchesCategory = category === null || p.category === category;
    return matchesTerm && matchesCategory;
  });
});

// ProductList.tsx
import { useAtom, useAtomValue } from 'jotai';

function ProductList() {
  const [searchTerm, setSearchTerm] = useAtom(searchTermAtom);
  const filtered = useAtomValue(filteredProductsAtom);

  return (
    <>
      <input value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
      {filtered.map((p) => <ProductCard key={p.id} product={p} />)}
    </>
  );
}

ويعني نموذج التفاعل الدقيق الخاص بـ Jotai أنه عندما يتغير مصطلح البحث، فإن المكونات التي تشترك فيها فقط هي فقط filteredProductsAtom إعادة العرض. المكونات التي تم الاشتراك فيها فقط categoryAtom لم تمس. وهذا يجعل Jotai ممتازًا للتطبيقات ذات الرسوم البيانية الكثيفة والمترابطة للحالة.

استعلام TanStack: المنزل المناسب لحالة الخادم

TanStack Query (المعروفة سابقًا باسم React Query) ليست مكتبة عامة لإدارة الحالة - إنها مكتبة حالة الخادم، وتتعامل مع هذه المسؤولية بشكل أفضل من أي شيء آخر في النظام البيئي. عادةً ما يعني جلب البيانات عن بعد وتخزينها مؤقتًا ومزامنتها وتحديثها في React بدون استعلام TanStack إدارة إشارات التحميل وكائنات الأخطاء وإبطال ذاكرة التخزين المؤقت يدويًا في الحالة المحلية أو المتجر العام. يقوم TanStack Query بأتمتة كل ذلك.

// hooks/useProducts.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

export function useProducts(filters: ProductFilters) {
  return useQuery({
    queryKey: ['products', filters],
    queryFn: () => api.getProducts(filters),
    staleTime: 5 * 60 * 1000,   // treat data as fresh for 5 minutes
    gcTime: 10 * 60 * 1000,     // keep unused data in cache for 10 minutes
  });
}

export function useUpdateProduct() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (update: ProductUpdate) => api.updateProduct(update),

    // Optimistic update
    onMutate: async (update) => {
      await queryClient.cancelQueries({ queryKey: ['products'] });
      const previous = queryClient.getQueryData(['products']);
      queryClient.setQueryData(['products'], (old: Product[]) =>
        old.map((p) => (p.id === update.id ? { ...p, ...update } : p))
      );
      return { previous };
    },

    onError: (_err, _update, context) => {
      queryClient.setQueryData(['products'], context?.previous);
    },

    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['products'] });
    },
  });
}

مصفوفة مفاتيح الاستعلام هي بدائية التخزين المؤقت لـ TanStack Query. أي استعلام يشترك في نفس المفتاح يشترك في نفس إدخال ذاكرة التخزين المؤقت. عندما تقوم بإبطال مفتاح ما، تتم إعادة جلب كل مكون مشترك في هذا المفتاح تلقائيًا في الخلفية ويتم تحديثه عند وصول بيانات جديدة.

الجلب المسبق والترطيب في Next.js

في تطبيق Next.js، يمكنك جلب الاستعلامات مسبقًا على الخادم وتجفيفها في حمولة HTML، مما يؤدي إلى التخلص من التحميل الدوار لعرض الصفحة الأولية بالكامل.

// app/products/page.tsx (Next.js App Router)
import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';

export default async function ProductsPage() {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({
    queryKey: ['products', {}],
    queryFn: () => api.getProducts({}),
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <ProductList />
    </HydrationBoundary>
  );
}

الجمع بين المكتبات: هندسة عملية

تستفيد التطبيقات الحقيقية دائمًا تقريبًا من الجمع بين أدوات متعددة، كل منها مسؤول عن فئة الحالة الخاصة به. قد يبدو تطبيق React ذو التنظيم الجيد المتوسط ​​إلى الكبير كما يلي:

• استعلام TanStack يمتلك كل حالة الخادم. يقوم بجلب البيانات عن بعد وتخزينها مؤقتًا ومزامنتها. لا شيء آخر يمس استجابات API.
• زوستاند تمتلك حالة العميل العالمية - عربة التسوق، وجلسة المستخدم المصادق عليها، وتفضيلات واجهة المستخدم، وأي تنسيق عبر الميزات يكون معقدًا للغاية بالنسبة للسياق.
• رد الفعل السياق يمتلك تكوينًا منخفض الحركة - السمة الحالية، والإعدادات المحلية، وأعلام الميزات.
• حالة الاستخدام / useReducer حالة المكون المحلي الخاصة - مشروط مفتوح/مغلق، قيم حقل النموذج (أو نموذج React Hook للنماذج المعقدة)، اختيار علامة التبويب.
• معلمات بحث URL حالة التنقل الخاصة - المرشحات النشطة، ترتيب الفرز، رقم الصفحة الحالية.

هذا الفصل بين الاهتمامات ليس جماليًا فقط. هذا يعني أن ذاكرة التخزين المؤقت لحالة الخادم الخاصة بك لن تتلوث أبدًا بحالة واجهة المستخدم، ولن يمتلئ متجر العميل العالمي الخاص بك أبدًا ببيانات الاستجابة التي سيخزنها TanStack Query بشكل أكثر كفاءة، ولن يؤدي السياق الخاص بك أبدًا إلى تشغيل عمليات إعادة العرض على مستوى التطبيق لأن شخصًا ما قام بتخزين قيمة سريعة التغير فيه.

أنماط الأداء تستحق المعرفة

محددات Memoised مع إعادة التحديد

عند اشتقاق القيم المحسوبة من متجر Redux، استخدم Reselect لتجنب إعادة الحساب في كل عملية تصيير. إعادة تصدير RTK createSelector من إعادة التحديد.

import { createSelector } from '@reduxjs/toolkit';

const selectItems = (state: RootState) => state.cart.items;

export const selectCartSummary = createSelector(selectItems, (items) => ({
  count: items.reduce((n, i) => n + i.quantity, 0),
  total: items.reduce((sum, i) => sum + i.price * i.quantity, 0),
}));

تقسيم العروض مع useTransition

رد فعل 18 useTransition يتيح لك وضع علامة على تحديث الحالة على أنه غير عاجل حتى يتمكن المتصفح من مقاطعته للتعامل مع الأعمال ذات الأولوية الأعلى مثل إدخال المستخدم. يعد هذا مفيدًا بشكل خاص عندما يؤدي تغيير الحالة إلى إعادة عرض مكلفة.

const [isPending, startTransition] = useTransition();

const handleFilterChange = (value: string) => {
  startTransition(() => {
    setFilterValue(value); // expensive downstream re-render is deferrable
  });
};

تجنب مشكلات هوية الكائن

أحد المصادر الشائعة لإعادة العرض الوهمية هو إنشاء كائن جديد أو مجموعة حرفية داخل العرض. useMemo و useCallback هي أدواتك هنا، ولكن قم بتطبيقها فقط عندما يكون لديك دليل على وجود مشكلة في الأداء - فالحفظ المبكر يضيف الحمل المعرفي دون فائدة مضمونة.

إطار القرار

استخدم شجرة القرار التالية عند اختيار أسلوب إدارة الحالة لميزة جديدة:

1. هل الحالة محلية بحتة لمكون واحد أم شجرة فرعية صغيرة؟ يستخدم useState أو useReducer.
2. هل تمثل الحالة البيانات التي تم جلبها من الخادم؟ يستخدم استعلام TanStack.
3. هل هي حالة العميل العالمية التي تحتاجها العديد من المكونات عبر الشجرة؟ الوصول ل زوستاند إلا إذا كنت بالفعل في قاعدة بيانات Redux.
4. هل تتغير الحالة نادرًا وتخدم غرض التكوين (الموضوع، اللغة)؟ يستخدم رد الفعل السياق.
5. هل الدولة مترابطة بشكل كبير مع العديد من القيم المشتقة؟ يعتبر جوتاي.
6. هل تحتاج إلى تصحيح أخطاء السفر عبر الزمن، أو اتفاقيات معمارية صارمة، أو ملاحم معقدة غير متزامنة؟ يستخدم مجموعة أدوات الإعادة.

الأنماط المضادة الشائعة التي يجب تجنبها

• تخزين استجابات الخادم في Redux أو Zustand. دع TanStack Query يمتلك تلك البيانات. يؤدي تكراره في متجر عالمي إلى إنشاء أخطاء في المزامنة.
• تجميع كل شيء في متجر واحد ضخم. الحالة غير المرتبطة التي تنتمي إلى نفس الشريحة تفرض اقترانًا غير ضروري وتجعل الاختبار أكثر صعوبة.
• استخدام السياق للتحديثات عالية التردد. كل تغيير في قيمة السياق يعيد عرض جميع المستهلكين. بالنسبة للقيم التي تتغير عند كل ضغطة مفتاح أو إطار رسوم متحركة، فإن السياق هو الأداة الخاطئة.
• اشتقاق الحالة داخل المكونات يجب أن تكون القيم المحسوبة التي تعتمد على الحالة عبارة عن محددات محفوظة أو ذرات مشتقة، وليست حسابات مضمنة يتم تشغيلها في كل عملية تصيير.
• تجاهل حالات التحميل والخطأ. حالة الخادم غير متزامنة بطبيعتها. أسطح استعلام TanStack isLoading, isError، و error لكل استفسار؛ استخدامها.

خاتمة

لم يكن مشهد إدارة الحالة في React أكثر صحة من أي وقت مضى. لم تعد بحاجة إلى الاختيار بين إطار عمل ثقيل وبناء كل شيء من الصفر. توفر Redux Toolkit إمكانية التنبؤ على مستوى المؤسسات دون النموذج النموذجي لسابقه. توفر Zustand نفس القوة مع جزء صغير من الإعداد. يقوم Jotai بحل المشكلات الصعبة في الرسوم البيانية الدقيقة والديناميكية للحالة. وقد قام TanStack Query بحل حالة الخادم بشكل نهائي - إذا كنت لا تزال تدير استجابات API useEffect و useState، أنت مدين لنفسك بالهجرة.

الفكرة الأكثر أهمية هي التصنيفية: حدد نوع الحالة التي تتعامل معها أولاً، ثم حدد الأداة المُحسّنة لهذه الفئة. قاوم غريزة تحويل كل شيء إلى نظام واحد. يؤدي النهج متعدد الطبقات - TanStack Query لحالة الخادم، وZustand لحالة العميل العالمية، وسياق التكوين، والحالة المحلية لكل شيء آخر - إلى إنتاج قواعد تعليمات برمجية يسهل التفكير فيها، وأسهل في الاختبار، وأكثر قابلية للصيانة مع نمو الفرق والمتطلبات.