كيفية إعداد React Context

تفسد عملية الـ Prop drilling الكود الخاص بك؛ حيث تقوم بتمرير البيانات عبر خمس طبقات من المكونات التي لا تحتاج إليها. يقوم React Context بحل هذه المشكلة، ومع ذلك، فإن معظم طرق الإعداد تخلق مشكلة جديدة.

عندما تستخدم "Go to Definition" على hook الخاص بالـ context، فغالبًا ما ينتهي بك الأمر في ملف لا يحتوي سوى على استدعاء useContext صغير. المنطق الفعلي موجود في ملف مختلف، مما يجعلك تقضي يومك في البحث عن منطق الحالة (state logic).

يمكنك إصلاح ذلك من خلال هيكلية أفضل.

اتبع هذا النمط:

  • ضع الـ context، والـ public hook، ومنطق الحالة (state logic) في ملف واحد.
  • اجعل الـ Provider مجرد غلاف بسيط (thin shell).
  • استخدم قاعدة lint لحماية المنطق الخاص بك (private logic).

قم بهيكلة ملفاتك بهذا الشكل:

src/context/ • GameContext.ts (الـ Context، والـ public hook، ومنطق الحالة) • GameProvider.tsx (غلاف بسيط)

داخل GameContext.ts، قم بإنشاء ثلاثة أجزاء:

  1. كائن الـ context.
  2. public hook لاستخدامه من قبل المكونات. يجب أن يرمي هذا الـ hook خطأً إذا كان الـ context فارغًا (null). يضمن ذلك فشل المكونات بسرعة (fail fast) إذا كانت خارج نطاق الـ provider.
  3. private hook لإدارة الحالة (state management). يحتوي هذا الـ hook على استدعاءات useState أو useReducer الخاصة بك.

من خلال وضع الـ public hook والمنطق الخاص (private logic) في نفس الملف، ستعمل ميزة "Go to Definition" بشكل مثالي، حيث ستنتقل مباشرة من المكون إلى المنطق.

هناك خطر واحد قائم؛ نظرًا لأن الـ private hook يتم تصديره (exported) لكي يتمكن الـ Provider من استخدامه، فقد يقوم أحد زملائك باستدعائه في مكان خاطئ. إذا فعلوا ذلك، فسيقومون بإنشاء حالة (state) جديدة ومعزولة بدلاً من استخدام الـ context المشترك.

توقف عن استخدام التعليقات لمنع حدوث ذلك، واستخدم قاعدة ESLint بدلاً من ذلك.

لقد قمت بإنشاء eslint-plugin-restrict-callers لحل هذه المشكلة. يمكنك تحديد الدوال المسموح لها باستدعاء hooks معينة.

على سبيل المثال، يمكنك إخبار ESLint أن GameProvider فقط هو من يمكنه استدعاء useGameStateManagement. وإذا حاول أي شخص آخر ذلك، سيفشل بناء المشروع (build) مع رسالة خطأ واضحة.

ملخص سير العمل:

  • تجميع الـ context، والـ public hooks، والمنطق الخاص في ملف واحد.
  • استخدام الـ Provider فقط لتمرير نتيجة الـ hook إلى قيمة الـ provider.
  • رمي الأخطاء في الـ public hook إذا كان الـ context مفقودًا.
  • استخدام ESLint لفرض الحدود بين الـ public hooks والـ private hooks.

المصدر: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h