استمرارية الحالة باستخدام Persist Middleware
زامن حالة Zustand مع localStorage أو sessionStorage باستخدام persist middleware.
استمرارية الحالة باستخدام Persist Middleware درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.
مرحبًا
لماذا نحفظ الحالة؟
البرمجية الوسيطة persist
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
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
import { createJSONStorage } from 'zustand/middleware';
persist(storeCreator, {
name: 'session-data',
storage: createJSONStorage(() => sessionStorage),
})إدارة الإصدارات والترحيل
persist(storeCreator, {
name: 'my-store',
version: 2,
migrate: (persistedState, version) => {
if (version === 1) {
return { ...persistedState, newField: 'default' };
}
return persistedState;
},
})Hydration وSSR
استدعاء onRehydrateStorage
persist(storeCreator, {
name: 'auth',
onRehydrateStorage: () => (state) => {
if (state?.token) state.fetchUser();
},
})مسح الحالة المحفوظة
const handleLogout = () => {
useAuthStore.persist.clearStorage();
useAuthStore.setState({ user: null, token: null });
};حدود حجم التخزين
تحقق سريع
مراجعة
التالي
تعلم 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 يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إنشاء أول متجر Zustand لك
- المحددات ومنع إعادة التصيير غير الضرورية
- استمرارية الحالة باستخدام Persist Middleware
- أدوات Zustand للمطورين واختبار المتاجر