استكشاف إدارة الدولة في التفاعل باستخدام Jotai: دليل عملي

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

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

ما هو جوتاي وكيف يعمل؟

جوتاي هي مكتبة لإدارة الدولة تقدم حلاً بسيطًا لإدارة الحالة على عكس البدائل الأكثر تعقيدًا مثل Redux. يستخدم وحدات مستقلة للحالة تسمى الذرات لإدارة الحالة في تطبيق React.

من الناحية المثالية ، يمكن للمكونات المختلفة في التطبيق الوصول إلى هذه الذرات وتحديثها باستخدام خطاف مقدم من Jotai يسمى

يستورد { ذرة } من"جوتاي";
مقدار ثابت countAtom = ذرة (1);

للوصول إلى الذرات والعمل معها في Jotai ، يمكنك ببساطة استخدام useAtom الخطاف الذي ، مثل الآخرين رد فعل الخطافات، يمكّنك من الوصول إلى قيمة الحالة وتحديثها داخل مكون وظيفي.

إليك مثال لتوضيح استخدامه:

يستورد {useAtom} من"جوتاي";
مقدار ثابت countAtom = ذرة (1);
وظيفةMyComponent() {
مقدار ثابت [count، setCount] = useAtom (countAtom) ؛
مقدار ثابت زيادة = () => setCount ((prevCount) => prevCount + 1);
يعود (


العدد: {عدد} </p>
زيادة </button>
 </div>
 );
}

في هذا المثال ، فإن ملف useAtom يستخدم الخطاف للوصول إلى العد الذرة والقيمة المرتبطة بها. ال setCount تُستخدم الدالة لتحديث قيمة الذرة وسيتم تلقائيًا إعادة عرض أي مكونات مرتبطة بالقيمة المحدَّثة.

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

مع استبعاد الأساسيات ، فلنقم ببناء تطبيق To-do React بسيط لفهم قدرات إدارة حالة Jotai بشكل أفضل.

إدارة الدولة في التفاعل باستخدام جوتاي

للبدء، إنشاء تطبيق React. بدلا من ذلك ، يمكنك استخدم Vite لإنشاء مشروع React. بمجرد سقالة تطبيق React الأساسي ، انطلق وقم بتثبيت Jotai في تطبيقك.

npm تثبيت jotai

بعد ذلك ، لاستخدام Jotai في تطبيقك ، تحتاج إلى لف تطبيقك بالكامل بامتداد مزود عنصر. يحتوي هذا المكون على المخزن الذي يعمل كمحور مركزي لتوفير قيم الذرة في جميع أنحاء التطبيق.

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

يستورد { مزود } من"جوتاي";

الآن لف التطبيق في ملف index.js أو main.jsx كما هو مبين أدناه.

يستورد تتفاعل من'تتفاعل'
يستورد رد فعل من"رد فعل دوم / العميل"
يستورد برنامج من"./App.jsx"
يستورد"./index.css"
يستورد { مزود } من"جوتاي";
ReactDOM.createRoot (وثيقة.getElementById ('جذر')).يجعل(



 </Provider>
 </React.StrictMode>,
)

تكوين مخزن البيانات

يعمل المتجر كمستودع مركزي لحالة التطبيق. يحتوي عادةً على تعريف الذرات والمحددات وأي وظائف أخرى ذات صلة مطلوبة لإدارة الحالة باستخدام Jotai.

في هذه الحالة ، يقوم بإدارة الذرات لإدارة قائمة العناصر لتطبيق المهام الواجبة. في ال src الدليل ، وخلق TodoStore.jsx ملف ، وأضف الرمز أدناه.

يستورد { ذرة } من"جوتاي";
يصدّرمقدار ثابت TodosAtom = ذرة ([]) ،

من خلال إنشاء وتصدير ملف تودوس أتوم، يمكنك التفاعل بشكل مريح وتحديث حالة المهام عبر المكونات المختلفة في التطبيق.

تطبيق وظائف تطبيق المهام الواجبة

الآن بعد أن قمت بتكوين Jotai في تطبيق React وإنشاء ذرة لإدارة حالة التطبيق ، انتقل إلى الأمام ، وإنشاء مكون مهام بسيط يتعامل مع وظائف الإضافة والحذف والتحرير للمهام الواجبة أغراض.

إنشاء ملف المكونات / Todo.jsx ملف في src الدليل. في هذا الملف ، أضف الكود أدناه:

1. قم باستيراد مخزن البيانات وملفات useAtom خطاف.

   يستورد رد فعل ، {useState} من'تتفاعل';
   يستورد {TodosAtom} من"../TodoStore";
   يستورد {useAtom} من"جوتاي";

2. قم بإنشاء المكون الوظيفي وإضافة عناصر JSX.

   مقدار ثابت تودو = () => {
   
   يعود (
   
   
    نائب ="مهام جديدة"
    القيمة = {القيمة}
    onChange = {event => setValue (event.target.value)}
    />
   أضف Todo </button>
   
   
    {todos.map (لكى يفعل => (
   
   
    {todo.text}
    handleDelete (todo.id)}> حذف </button>
    </li>
    ))}
    </ul>
    </div>
    );
   };