مزامنة الحالة مع localStorage

قد يكون أول ما يخطر بالبال قراءة localStorage في مكان وكتابته في مكان آخر، لكن هذين المكانين قد يبتعدان عن بعضهما. فتؤدي تحديثات الحالة التي تنسى الحفظ، أو القيم المحفوظة التي لا تنعكس في الحالة، إلى أخطاء.

أنتم بحاجة إلى مصدر واحد للحقيقة يُبقي حالة React والتخزين متزامنين تمامًا.

الحل المنظم هو خطاف useLocalStorage يغلّف useState ويحفظ التغييرات تلقائيًا. ويُرجع قيمة ودالة ضبط تمامًا مثل useState.

يستخدمه المستهلكون تمامًا مثل الحالة العادية، لكنهم يحصلون على الاستمرارية تلقائيًا.

تُعد قراءة localStorage عملية متزامنة، لذلك ينبغي ألا تنفذوها عند كل عملية تصيير. مرروا دالة إلى useState، وهي المهيئ الكسول، بحيث تحدث القراءة مرة واحدة فقط عند التركيب.

تحلل هذه الدالة القيمة المخزنة أو تُرجع القيمة الافتراضية المقدمة.

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

تتجنبون بذلك، عند قراءة localStorage، تنفيذ عمل متزامن متكرر على الخيط الرئيسي مع كل عملية تصيير.

لحفظ التحديثات، أضيفوا useEffect يُنفذ كلما تغيرت القيمة، ويستدعي localStorage.setItem(key, JSON.stringify(value)).

يؤدي وضع القيمة في مصفوفة التبعيات إلى كتابة كل تغيير في الحالة إلى التخزين تلقائيًا.

عند ضبط قيمة اعتمادًا على القيمة السابقة، استخدموا الصيغة الوظيفية setValue(prev => prev + 1). فهذا يتجنب الإغلاقات القديمة التي قد تؤدي إلى كتابة قيمة قديمة تم التقاطها.

ويكتسب ذلك أهمية خاصة داخل معالجات الأحداث والتأثيرات التي قد تلتقط لقطة قديمة.

تُرجع getItem القيمة null عندما لا يكون المفتاح موجودًا. لذلك يجب أن يكتشف المهيئ هذه الحالة ويرجع إلى القيمة الافتراضية بدلًا من محاولة تحليل null.

يتعامل حارس مثل stored != null ? JSON.parse(stored) : defaultValue مع الزيارة الأولى بسلاسة.

في TypeScript تجعلون الخطاف عامًا: function useLocalStorage<T>(key: string, initial: T). ويحافظ ذلك على نوع القيمة، بحيث يحصل المستهلكون على أمان كامل للأنواع.

تُكتب صيغة الصفيف المُرجع كالتالي: [T, Dispatch<SetStateAction<T>>]، بما يطابق useState.

يتغير شكل بياناتكم بمرور الوقت، وقد تؤدي القيم القديمة المخزنة إلى تعطل الشيفرة الجديدة. خزّنوا مفتاح إصدار إلى جانب البيانات حتى تتمكنوا من اكتشاف التنسيقات القديمة.

فعلى سبيل المثال، احفظوا { version: 2, data } وقارنوا الإصدار عند القراءة.

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

يمنع ذلك حدوث أعطال بسبب بيانات كتبتها نسخة أقدم من تطبيقكم.

يجمع useLocalStorage الكامل بين مهيئ كسول يقرأ البيانات ويحللها بأمان، ودالة ضبط تدعم التحديثات الوظيفية، وuseEffect يكتب التغييرات مباشرةً مع إدارة الإصدارات.

والنتيجة بديل مباشر لـ useState يستمر بعد إعادة التحميل.

اختبروا مدى فهمكم لتهيئة الحالة.

تعلمتم إنشاء خطاف useLocalStorage باستخدام مهيئ كسول، وحفظ التغييرات عبر useEffect، واستخدام التحديثات الوظيفية لتجنب الإغلاقات القديمة، ومعالجة القيم التي تساوي null.

كما تعرفتم إلى الأنواع العامة في TypeScript وإدارة الإصدارات لحذف البيانات القديمة بأمان.