كسر دائرة الارتباك: رحلة التبعية الدائرية من جديد

لقد عثرت مؤخرًا على خطأ في قاعدة بيانات Redux الخاصة بي مما جعلني أخدش رأسي. إذا شعرت يومًا بهذه الموجة المفاجئة من الارتباك عندما يلقي فريق الاختبار خطأً لا معنى له، فسوف تعرف هذا الشعور. إليك ما حدث وكيف وجدت المشكلة (وأصلحتها) في النهاية.

ما على الأرض هو التبعية الدائرية؟

A التبعية الدائرية تحدث عندما تعتمد وحدتان أو أكثر على بعضها البعض - بشكل مباشر أو غير مباشر - مما يؤدي إلى إنشاء حلقة لا نهائية في سلسلة التبعية. بمعنى آخر، يبدو الأمر مثل صديقين يقولان: "أنت اذهب أولاً،" لكن لا أحد يتحرك أبدًا. في جافا سكريبت، يمكن أن يؤدي ذلك إلى وحدات غير محددة أو بيانات غير كاملة، مما يؤدي إلى أخطاء قد يصعب تتبعها بشكل لا يصدق.

المذنب: مثال

تخيل ملفين جافا سكريبت، ModuleA.js وmoduleB.js:

// moduleA.js
import { functionB } from './moduleB.js';
export function functionA() {
  console.log('functionA called');
  functionB();
}

// moduleB.js
import { functionA } from './moduleA.js';
export function functionB() {
  console.log('functionB called');
  functionA();
}

هنا، تعتمد كلتا الوحدتين على بعضهما البعض. عندما تحاول JavaScript تحميلهما، يتم الخلط بينهما لأنه لا يمكن تحميل أي منهما بالكامل دون أن يكون الآخر جاهزًا أولاً. يؤدي هذا إلى مشاكل مثل الوظائف غير المحددة أو الوحدات غير المكتملة - وهي في الأساس فوضى.

إذًا، كيف يمكنني العثور على تبعيتي الدائرية؟

آه، الخطأ المروع الذي بدأ هذه المغامرة:

Error: `reducer` is a required argument, and must be a function or an object of functions that can be passed to combineReducers.
 ❯ Module.configureStore node_modules/@reduxjs/toolkit/src/configureStore.ts:98:11

أول رد فعل لي؟ "انتظر، ماذا؟!" - ليست أفضل لحظاتي. كنت متأكدًا من أن مخفضات السرعة الخاصة بي كانت في مكانها الصحيح، لذلك بدا هذا الخطأ مفاجئًا. بعد بعض البحث، أدركت أن هذه لم تكن مشكلة مخفض مفقودة، بل كانت تبعية دائرية تتسلل إلى إعداد Redux الخاص بي. بالطبع، اكتشاف ذلك لم يكن سهلاً!

البطل الحقيقي: dpdm

وذلك عندما وجدت منقذي: حزمة npm dpdm. تحلل هذه الجوهرة شجرة التبعيات الخاصة بك وتوضح لك أين تعيش تلك التبعيات الدائرية المخادعة. تشغيل الأمر التالي أعطاني رؤية واضحة:

dpdm --no-warning --no-tree ./src/index.tsx

وفويلا! وإليك لمحة عما وجدته في مشروعي:

• Circular Dependencies
  01) src/stores/store.ts -> src/stores/rootReducer.ts -> src/stores/slice/authSlice.ts -> src/utilities/api.ts
  02) src/stores/rootReducer.ts -> src/stores/slice/bookingSlice.ts -> src/hooks/redux.tsx -> src/stores/types.ts -> src/stores/setUpStore.ts
  03) src/stores/types.ts -> src/stores/setUpStore.ts
  ...

الإصلاح: وقت إعادة الهيكلة!

كان التقرير واضحًا: كانت هناك مجموعة من التبعيات الدائرية في ملفات Redux الخاصة بي، بشكل أساسي في store.ts وrootReducer.ts وبعض الشرائح. بعد تقسيم بعض المنطق، وتفكيك التبعيات غير الضرورية، وإعادة بناء الكود، تمكنت أخيرًا من إعادة الأمور إلى نصابها.

الدروس المستفادة

• التبعيات الدائرية خادعة: غالبًا لا تظهر حتى وقت التشغيل أو أثناء اختبارات الوحدة، مما يجعل من الصعب تعقبها.
• أدوات مثل dpdm هي منقذة للحياة: لا تضيع الوقت في البحث يدويًا من خلال الواردات. دع الأدوات تقوم برفع الأحمال الثقيلة.
• إعادة البناء هي صديقك: في بعض الأحيان تكون التبعيات الدائرية علامة على بنية سيئة. لا يؤدي إعادة البناء الجيد إلى إصلاح المشكلة المباشرة فحسب، بل يجعل قاعدة التعليمات البرمجية الخاصة بك أكثر نظافة وأكثر قابلية للصيانة.

لذا، في المرة القادمة التي تواجه فيها إحدى هذه الحشرات المزعجة، تناول بعض القهوة، واضحك، وكسر تلك الدائرة!

تصحيح أخطاء سعيد! ?