React Academy · درس

استمرارية الحالة باستخدام Persist Middleware

زامن حالة Zustand مع localStorage أو sessionStorage باستخدام persist middleware.

الدرس 3 من 413 خطوة

استمرارية الحالة باستخدام Persist Middleware درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

مرحبًا

في هذا الدرس، ستستخدم البرمجية الوسيطة persist في Zustand لمزامنة حالة المخزن تلقائيًا مع localStorage، بحيث تبقى الحالة بعد إعادة تحميل الصفحة

لماذا نحفظ الحالة؟

من دون الحفظ، تُعاد تهيئة حالة المخزن بالكامل عند تحديث المستخدم للصفحة. ويمنح حفظ عناصر مثل محتويات سلة التسوق أو تفضيلات المستخدم أو حالة واجهة المستخدم، مثل اللوحات المفتوحة، في localStorage المستخدمين تجربة سلسة بين الجلسات

البرمجية الوسيطة persist

غلّف استدعاء create() باستخدام persist(). وقدّم مفتاح تخزين فريدًا. وستقرأ Zustand البيانات تلقائيًا من localStorage عند التركيب، وتكتب فيها عند كل تغيير في الحالة
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useCartStore = create(
  persist(
    (set) => ({
      items: [],
      addItem: (item) => set(s => ({ items: [...s.items, item] })),
    }),
    { name: 'cart-storage' } // localStorage key
  )
);

الحفظ الجزئي باستخدام partialize

استخدم `partialize` لحفظ شرائح محددة من المخزن فقط. ويؤدي ذلك إلى استبعاد البيانات المؤقتة، مثل علامات التحميل، من localStorage
persist(
  (set) => ({ user: null, token: null, loading: false, fetch: () => {} }),
  {
    name: 'auth-storage',
    partialize: (state) => ({ user: state.user, token: state.token }),
    // loading and fetch are NOT persisted
  }
)

استخدام sessionStorage

للحفظ خلال جلسة المتصفح فقط، حيث تُمسح البيانات عند إغلاق علامة التبويب، مرّر `createJSONStorage(() => sessionStorage)` بوصفه خيار التخزين
import { createJSONStorage } from 'zustand/middleware';

persist(storeCreator, {
  name: 'session-data',
  storage: createJSONStorage(() => sessionStorage),
})

إدارة الإصدارات والترحيل

عند تغيّر بنية المخزن، مثل إضافة حقول أو إعادة تسمية مفاتيح، عيّن رقم `version` وقدّم دالة `migrate` لترقية البيانات القديمة المحفوظة
persist(storeCreator, {
  name: 'my-store',
  version: 2,
  migrate: (persistedState, version) => {
    if (version === 1) {
      return { ...persistedState, newField: 'default' };
    }
    return persistedState;
  },
})

Hydration وSSR

على الخادم، مثل Next.js، لا يكون localStorage موجودًا. وتعالج البرمجية الوسيطة persist في Zustand ذلك بسلاسة؛ إذ تتخطى hydration على الخادم، ثم تعيد hydration على العميل بعد التركيب

استدعاء onRehydrateStorage

استخدم `onRehydrateStorage` لتشغيل التعليمات البرمجية عند استعادة المخزن من وحدة التخزين. ويفيد ذلك في تشغيل استدعاء API بعد استعادة رمز مميز
persist(storeCreator, {
  name: 'auth',
  onRehydrateStorage: () => (state) => {
    if (state?.token) state.fetchUser();
  },
})

مسح الحالة المحفوظة

استدعِ `useMyStore.persist.clearStorage()` لإزالة البيانات المحفوظة من localStorage، وهو أمر مفيد في تدفقات تسجيل الخروج
const handleLogout = () => {
  useAuthStore.persist.clearStorage();
  useAuthStore.setState({ user: null, token: null });
};

حدود حجم التخزين

يفرض localStorage حدًا يتراوح بين 5 و10 ميغابايت لكل أصل. تجنب حفظ مجموعات البيانات الكبيرة، مثل كتالوجات المنتجات الكاملة. واحفظ المعرّفات أو كائنات الإعداد الصغيرة فقط

تحقق سريع

ما الخيار في البرمجية الوسيطة persist الذي يتيح لك استبعاد حقول معينة من الحالة عند حفظها في localStorage؟

مراجعة

غلّف مخزن Zustand باستخدام persist() وقدّم مفتاح name. واستخدم partialize لتخزين الشرائح ذات الصلة فقط. وحدّد الإصدار ونفّذ الترحيل عند تغيّر بنية المخزن. واستخدم clearStorage() عند تسجيل الخروج

التالي

الدرس التالي: **Zustand DevTools واختبار المخازن** — ستتصل بـ Redux DevTools وتكتب اختبارات وحدات لإجراءات Zustand
البدء مجانًا

تعلم React مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات
88
الدروس
324

الأسئلة الشائعة

هل درس «استمرارية الحالة باستخدام Persist Middleware» مجاني؟

نعم — نص درس «استمرارية الحالة باستخدام Persist Middleware» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «استمرارية الحالة باستخدام Persist Middleware»؟

زامن حالة Zustand مع localStorage أو sessionStorage باستخدام persist middleware. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «استمرارية الحالة باستخدام Persist Middleware»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. إنشاء أول متجر Zustand لك
  2. المحددات ومنع إعادة التصيير غير الضرورية
  3. استمرارية الحالة باستخدام Persist Middleware
  4. أدوات Zustand للمطورين واختبار المتاجر
← العودة إلى React Academy