الـ Atoms المشتقة والـ Atoms غير المتزامنة

أنشئوا ذرة مشتقة بتمرير دالة getter: const doubleAtom = atom(get => get(countAtom) * 2). لا تخزّن هذه الذرة قيمة؛ بل تعيد حسابها كلما تغيّرت countAtom.

تظل الذرات المشتقة محدّثة دائمًا من دون أي مزامنة يدوية. وهي المكافئ في Jotai للخصائص المحسوبة.

يتتبّع Jotai الذرات التي جرى الوصول إليها داخل دالة getter، ويعيد تقييم الذرة المشتقة تلقائيًا عند تغيّر أيٍّ منها. ولا تحتاجون إلى التصريح بالتبعيات صراحةً.

إذا استدعت دالة getter كلًا من get(atomA) وget(atomB)، فستتحدّث الذرة المشتقة عند تغيّر atomA أو atomB.

تحتوي الذرة المشتقة القابلة للكتابة على getter وsetter معًا: atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase())). تعطي القراءة القيمة المحوّلة، بينما تحوّل الكتابة القيمة وتخزّنها مجددًا.

يطبّق هذا النمط تحويلًا ثنائي الاتجاه للبيانات من دون كشف الذرة الأساسية مباشرةً.

يمكن أن تكون دالة getter غير متزامنة: const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); }). يتعامل Jotai مع الوعود الناتجة من دوال getter الخاصة بالذرات بشكل أصلي.

عند تغيّر userIdAtom، يعيد Jotai تشغيل دالة getter غير المتزامنة تلقائيًا، ويعلّق المكوّن المستهلك أثناء تنفيذ الجلب.

تتكامل الذرات غير المتزامنة بسلاسة مع React Suspense. غلّفوا المكوّن المستهلك بحدّ Suspense مع قيمة fallback. يُعلَّق المكوّن أثناء انتظار الوعد، ثم يُصيَّر عند اكتماله.

يلغي هذا الحاجة إلى إدارة حالة التحميل يدويًا في المكوّن: فلا حاجة إلى علامة isLoading ولا إلى useEffect لجلب البيانات.

استوردوا loadable من jotai/utils. غلّفوا ذرة غير متزامنة: const loadableUserAtom = loadable(userAtom). تتلقى المكوّنات التي تقرأ loadableUserAtom إحدى الحالات {state: 'loading'} أو {state: 'hasData', data: user} أو {state: 'hasError', error} من دون تعليق.

استخدموا loadable عندما تحتاجون إلى عرض حالة تحميل مخصصة داخل الواجهة بدلًا من الاعتماد على حدّ Suspense.

تنشئ الأداة atomWithReset من jotai/utils ذرة يمكن إعادتها إلى قيمتها الأولية باستخدام الرمز RESET. وهذا أنظف من تتبّع القيمة الأولية وإعادة تطبيقها يدويًا.

في النماذج، أعيدوا ضبط جميع ذرات الحقول عند الإرسال أو الإلغاء باستدعاء setter لكل منها مع RESET داخل معالج واحد.

يمكن لذرة مشتقة القراءة من عدة ذرات أخرى: const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) })). ينشئ هذا مرجعًا واحدًا مستقرًا يتحدّث عند تغيّر أي تبعية.

تشترك المكوّنات التي تحتاج إلى الملخص فقط في summaryAtom بدلًا من الاشتراك في الذرات الثلاث الفردية.

يمكن للذرات المشتقة قراءة ذرات مختلفة بصورة شرطية: const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom)). عند تبديل modeAtom، تبدّل الذرة المشتقة مصدر بياناتها تلقائيًا.

يعيد Jotai الاشتراك في الذرة الصحيحة عند كل تقييم، مما يضمن عدم بقاء بيانات قديمة من الفرع غير النشط.

إذا طرحت دالة getter الخاصة بذرة غير متزامنة خطأً أو رفضت، ينتقل الخطأ إلى أقرب حدّ لأخطاء React عند استخدامها مع Suspense. أما مع loadable، فيظهر الخطأ في الحقل state.error لمعالجته داخل الواجهة.

احرصوا دائمًا في شيفرة الإنتاج على إقران الذرات غير المتزامنة إما بـ ErrorBoundary أو بغلاف loadable.

تخزّن الذرات المشتقة آخر نتيجة لها مؤقتًا. فإذا أعادت جميع الذرات التابعة القيم نفسها التي أعادتها في التقييم السابق، تعيد الذرة المشتقة المرجع نفسه ولا تحدث أي عمليات إعادة تصيير للمكوّنات التابعة.

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

ماذا يحدث لمكوّن يقرأ ذرة غير متزامنة أثناء كون وعدها قيد الانتظار؟

تحسب الذرات المشتقة القيم من ذرات أخرى باستخدام دوال getter مع تتبّع تلقائي للتبعيات. وتستخدم الذرات غير المتزامنة دوال getter غير متزامنة، وتتكامل افتراضيًا مع React Suspense؛ استخدموا loadable من jotai/utils لتجاوز ذلك ومعالجة حالتي التحميل والخطأ داخل الواجهة.

تتيح الذرات المشتقة القابلة للكتابة إجراء تحويلات ثنائية الاتجاه، بينما تبدّل الذرات الشرطية مصادر البيانات ديناميكيًا استنادًا إلى قيم ذرات أخرى.