عند إدارة الحالات المعقدة في تطبيق Next ، يمكن أن تصبح الأمور صعبة بسرعة. الخطافات التقليدية مثل useState المساعدة في إدارة الدولة ولكن مع طرح قضية الحفر الدعامة. يعني حفر الدعامة تمرير البيانات أو الوظائف لأسفل من خلال عدة مكونات.

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

قبل أن تبدأ قائمة المهام الخاصة بك

قبل أن تتمكن من إنشاء تطبيق قائمة المهام ، ستحتاج إلى:

• المعرفة الأساسية ب عوامل تشغيل JavaScript الحديثة و استخدام React لخطاف الحالة.
• فهم كيف مصفوفات التدمير والكائنات في JavaScript.
• العقدة v16.8 أو أحدث مثبتًا على جهازك المحلي والاعتياد عليه مديري الحزم مثل npm أو الغزل.

يمكنك العثور على المشروع النهائي على جيثب كمرجع ومزيد من الاستكشاف.

فهم حالة التطبيق وإدارته

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

لفهم حالة التطبيق ، ضع في اعتبارك الحالات المحتملة لتطبيق عداد بسيط. يشملوا:

• الحالة الافتراضية عندما يكون العداد عند الصفر.
• زيادة الدولة عندما يزيد العداد بواحد.
• حالة متناقصة عندما يقلل العداد بواحد.
• حالة إعادة التعيين عندما يعود العداد إلى حالته الافتراضية.

يمكن لمكوِّن React الاشتراك في التغييرات في الحالة. عندما يتفاعل المستخدم مع مثل هذا المكون ، يمكن لأفعاله - مثل نقرات الأزرار - إدارة تحديثات الحالة.

يعرض هذا المقتطف تطبيق عداد بسيط ، في حالته الافتراضية ، يدير الحالة بناءً على إجراءات النقر:

مقدار ثابت [عداد ، setCounter] = useState (0);
يعود (

{عداد} </h1>
 setCounter (عداد + 1)}> زيادة </button>
 setCounter (عداد - 1)}> تقليل </button>
 setCounter (0)}> إعادة تعيين </button>
 </main>
);

الإعداد والتثبيت

يحتوي مستودع المشروع على فرعين: بداية و سياق. يمكنك استخدام فرع البدء كقاعدة لبناء المشروع من أو فرع السياق لمعاينة العرض التوضيحي النهائي.

استنساخ تطبيق المبتدئين

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

شخص سخيف استنساخ -ب بداية https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

قم بتشغيل الأمر التالي ، داخل دليل المشروع ، لتثبيت التبعيات وبدء خادم التطوير الخاص بك:

تطوير الغزل والغزل

أو:

npm i && npm تشغيل dev

إذا سارت الأمور على ما يرام ، فيجب أن تظهر واجهة المستخدم في متصفحك:

تنفيذ المنطق

توفر واجهة برمجة تطبيقات السياق طريقة لإدارة بيانات الحالة ومشاركتها عبر المكونات ، دون الحاجة إلى حفر عنصر يدويًا.

الخطوة 1: إنشاء وتصدير السياق

إنشاء src / التطبيق / السياق مجلد لتخزين ملف السياق والحفاظ على دليل المشروع منظمًا جيدًا. داخل هذا المجلد ، قم بإنشاء ملف todo.context.jsx الملف الذي سيحتوي على كل منطق السياق للتطبيق.

قم باستيراد ملف إنشاء المحتوى وظيفة من تتفاعل المكتبة واسمها ، تخزين النتيجة في متغير:

يستورد {createContext} من"تتفاعل";
مقدار ثابت TodoContext = createContext () ،

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

يصدّرمقدار ثابت useTodoContext = () => useContext (TodoContext) ؛

الخطوة 2: إنشاء الدول وإدارتها

لتنفيذ إجراءات CRUD (إنشاء ، قراءة ، تحديث ، حذف) للتطبيق ، ستحتاج إلى إنشاء الحالات وإدارتها باستخدام مزود عنصر.

مقدار ثابت TodoContextProvider = ({ أطفال }) => {
مقدار ثابت [مهمة ، setTask] = useState ("");
مقدار ثابت [مهام ، setTasks] = useState ([]) ،
يعود<TodoContext. مزودقيمة={{}}>{أطفال}TodoContext. مزود>;
};
يصدّرتقصير TodoContextProvider ؛

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

مقدار ثابت handleTodoInput = (مدخل) => setTask (الإدخال) ؛

أضف إنشاء مهمة الوظيفة التي سيتم تشغيلها عندما يرسل المستخدم مهمة. تقوم هذه الوظيفة بتحديث ملف مهام الدولة ويعين المهمة الجديدة معرّف عشوائي.

مقدار ثابت createTask = (ه) => {
 e.preventDefault () ؛
 setTasks ([
 {
 بطاقة تعريف: رياضيات.trunc (رياضيات.عشوائي() * 1000 + 1),
 مهمة،
 },
 ...مهام،
 ]);
 };

يخترع updateTask وظيفة الخرائط من خلال مهام قائمة وتحديث المهمة التي يتطابق معرّفها مع معرّف المهمة التي تم النقر عليها.

مقدار ثابت updateTask = (معرف ، updateText) =>
 setTasks (خريطة المهام ((ر) => (t.id معرف؟ {... ر ، مهمة: updateText}: t)))؛

إنشاء حذف المهمة الوظيفة التي تقوم بتحديث مهام قائمة بحيث تشمل جميع المهام التي لا يتطابق معرّفها مع المعلمة المحددة.

مقدار ثابت deleteTask = (بطاقة تعريف) => setTasks (مهام. تصفية ((ر) => t.id! == معرف)) ؛

الخطوة 3: أضف الدول والمعالجات إلى المزود

الآن قمت بإنشاء الحالات وكتابة التعليمات البرمجية لإدارتها ، تحتاج إلى جعل هذه الحالات ووظائف المعالج متاحة لـ مزود. يمكنك توفيرها في شكل كائن ، باستخدام ملف قيمة ممتلكات مزود عنصر.

يعود (
 القيمة = {{
 مهمة،
 مهام،
 مقبضTodoInput ،
 إنشاء مهمة ،
 تحديث
 حذف المهمة ،
 }}
 >
 {أطفال}
 </TodoContext.Provider>
);

الخطوة 4: تحديد نطاق السياق

ال مزود يجب أن تقوم بإنشاء التفاف لمكون المستوى الأعلى لإتاحة السياق للتطبيق بأكمله. للقيام بذلك ، قم بتحرير src / app / page.jsx ولف تودوس المكون مع TodoContextProvider عنصر:

;
</TodoContextProvider>;

الخطوة 5: استخدم السياق في المكونات

تحرير الخاص بك src / التطبيق / المكونات / Todos.jsx ملف وإتلافه المهام والمهمة, مقبض، و إنشاء مهمة عبر مكالمة إلى useTodoContext وظيفة.

مقدار ثابت {مهمة ، مهام ، handleTodoInput ، createTask} = useTodoContext () ؛

الآن ، قم بتحديث عنصر النموذج للتعامل مع حدث الإرسال والتغييرات في حقل الإدخال الرئيسي:

 createTask (ه)}>
"todo-input" اكتب ="نص" نائب ="أدخل مهمة" القيمة المطلوبة = {مهمة} onChange = {(e) => handleTodoInput (e.target.value)} />
"Submit-todo" اكتب ="يُقدِّم" القيمة ="إضافة مهمة" />
</form>

الخطوة 6: عرض المهام في واجهة المستخدم

يمكنك الآن استخدام التطبيق لإنشاء مهمة وإضافتها إلى ملف مهام قائمة. لتحديث العرض ، ستحتاج إلى تعيين من خلال القائمة مهام وعرضها في واجهة المستخدم. أولاً ، قم بإنشاء ملف src / التطبيق / المكونات / Todo.jsx مكونًا لعقد عنصر مهام واحد.

في حدود src / التطبيق / المكونات / Todo.jsx المكون أو تحرير أو حذف مهمة عن طريق استدعاء updateTask و حذف المهمة الوظائف التي أنشأناها فيها src / app / Context / todo.context.jsx ملف.

يستورد رد فعل ، {useState} من"تتفاعل";
يستورد {useTodoContext} من"../context/todo.context";
مقدار ثابت تودو = ({ مهمة }) => {
مقدار ثابت {updateTask، deleteTask} = useTodoContext () ،
// مسارات حالة isEdit عندما تكون المهمة في وضع التحرير
مقدار ثابت [isEdit، setIsEdit] = useState (خطأ شنيع);
يعود (

"برنامج التفاف المهام">


 {هل تحرير؟ ( <مدخليكتب="نص"قيمة={مهمة. مهمة}
 onChange = {(e) => updateTask (task.id، e.target.value)} />):
 (<ذاسم الطبقة="مهمة">{مهمة. مهمة}ذ> )}


"أجراءات">
"يحرر"
 onClick = {() => setIsEdit (! isEdit)}> {isEdit؟ "يحفظ": "يحرر"} </button> 
 deleteTask (task.id)}> حذف </button>
 </td>
 </tr>
 </tbody>
 </table>
 );
};



يصدّرتقصير لكى يفعل؛

لتقديم ملف src / التطبيق / المكونات / Todo.jsx مكون لكل مهمة، اذهب إلى src / التطبيق / المكونات / Todos.jsx ملف وخريطة مشروطة من خلال مهام مباشرة بعد رأس علامة الإغلاق.

{مهام && (

 {خريطة المهام ((المهمة ، أنا) => ( <لكى يفعلمفتاح={أنا}مهمة={مهمة} /> ))}
</main>
)}

اختبر تطبيقك في متصفح وتأكد من أنه يعطي النتيجة المتوقعة.

حفظ المهام في التخزين المحلي

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

تعد واجهة برمجة تطبيقات تخزين الويب تحسينًا في تخزين ملفات تعريف الارتباط ، مع ميزات تعمل على تحسين تجربة المستخدمين والمطورين على حدٍ سواء.