بيان المشكلة

أريد مشاركة حالة بيانات مشتركة بين تطبيق Vanilla Js وتطبيق React.

ما هو موجود في هذا POC

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

هيكل المشروع

ينقسم مشروعنا إلى قسمين رئيسيين:

1. الدليل الجذر: يحتوي على الملفات الأساسية لجزء Vanilla JavaScript من التطبيق.
2. دليل react-mf: يضم الواجهة الأمامية الصغيرة لـ React والتي تتفاعل مع جزء JavaScript الفانيليا.

يمكن التحقق من بنية التطبيق على الرابط هنا

الملفات الرئيسية وأدوارها

الدليل الجذر

• index.html: هذه هي نقطة الدخول لتطبيقنا، حيث تقوم بإعداد بنية HTML وتضمين روابط إلى أوراق الأنماط وملفات JavaScript. ويتميز بعنصري div رئيسيين مع id="app" وid="root"، اللذين يتم استخدامهما لتركيب تطبيق Vanilla JS والواجهة الأمامية الصغيرة React، على التوالي.

• main.js: يعمل كملف JavaScript الرئيسي لتهيئة جزء Vanilla JS من التطبيق. يتعامل مع المنطق الأساسي ويتفاعل مع الحالة المشتركة.

• counter.js: يحتوي على الكود المسؤول عن إرسال الإجراءات إلى متجر Redux. على سبيل المثال، يرسل إجراء INCREMENT لتحديث العداد.

• store.js: يقوم بإعداد متجر Redux، الذي يدير حالة التطبيق ويضمن الاتساق بين أجزاء Vanilla JS وReact في التطبيق.

رد فعل-MF الدليل

• App.jsx: مكون React الرئيسي في الواجهة الأمامية الصغيرة لدينا. يستخدم ربط useState لإدارة الحالة المحلية ويشترك في متجر Redux ليعكس الحالة العالمية. يعرض زرًا لإرسال إجراء INCREMENT ويعرض العدد الحالي من المتجر.

• main.jsx: نقطة الدخول للواجهة الأمامية الصغيرة لـ React، حيث تتم تهيئة تطبيق React وعرضه.

يمكنك العثور على الكود الكامل في مستودع GitHub.